flex布局( flex布局的步骤)

一、flex布局和grid布局区别

Flex布局和Grid布局都是CSS3引入的新的布局方式，它们之间的主要区别如下：1.方向不同：Flex布局是一维布局，只能在水平或垂直方向上排列元素，而Grid布局是二维布局，允许在行和列上同时进行布局。2.元素的分配方式不同：在Flex布局中，通过设置每个元素的flex属性来决定它们在容器中的分配方式，可以根据比例分配空间或者设置固定的尺寸。而在Grid布局中，通过设置容器的网格规则，可以精确地将元素放置在指定的单元格中。3.对齐方式不同：在Flex布局中，通过设置容器的align-items属性和justify-content属性可以控制元素在交叉轴和主轴上的对齐方式。而在Grid布局中，通过设置容器的align-items属性和justify-items属性可以控制元素在行和列上的对齐方式。4.嵌套方式不同：在Flex布局中，元素可以相互嵌套，形成一个层级结构。而在Grid布局中，元素也可以相互嵌套，但是它们是相互独立的网格项，不会形成层级结构。综上所述，Flex布局适用于一维布局的情况，比如导航条、页脚等；而Grid布局适用于二维布局的情况，比如网格布局、复杂的页面布局等。

二、flex布局框架

布局思路是这样的：

1、首先给header和footer一个固定的高度。

2、然后记得body的高度要设为100%，不然body是没有高度的。

3、body的布局设为flex，然后。

4、设置好了header和footer之后，我们就可以开始设计main部分的内容排列，因为body设置的排列是column，就是纵向排列，所以不能用align-items撑开main，只能在main里面设置flex:11auto将元素撑大，而且aside和article是有滚动条的：所以在main里面要设置隐藏浮动，不然会将屏幕撑到很大。

5、上面也可以看到main也是flex布局，所以aside和article成行排列，要使article撑满宽度，也要设置flex:11auto。最后再完善每块里面的细节布局。

三、flex布局用得多吗

随着移动端的兴起，flex布局的使用越来越普遍。相较于传统的盒模型布局，flex布局更加灵活，能够轻松实现多种排列方式，适应不同终端的展示需求。

同时，flex布局也能够使代码更加简洁易懂，减少了许多浮动和定位的代码，提升了开发效率。因此，我认为在现代web开发中，flex布局已经成为了一种必备的技能。