弹性布局

灰太狼 2021-11-02 05:50 341阅读 0赞

**弹性布局**  
在制作网页的过程中，布局是我们最重要的一个环节，可以说布局的好坏直接影响到整个网页的成败，布局成，则事半功倍，布局败，则事倍功半。随着移动互联的到来，响应式网站风靡。这也就兴起了一种新的布局方式——弹性布局。取代我们之前“display+float+position”的布局方式，采取全新的弹性布局，会让你的网站如丝绸般顺滑！  
弹性布局（Flex布局）：display：fixed（2009年推出）  
弹性布局的优点：可以解决复杂的问题，缺点是IE不兼容  
注意：改变的是父元素的布局方式，由默认的流式布局改变成弹性布局；  
**基本概念：1.容器 2.项目**  
1.容器：在这里指的是需要添加弹性布局的【父元素】  
2.项目：弹性布局容器中的每一个子元素，称之为项目；  
**基本方向：1.主轴 2.交叉轴**  
1.主轴：默认为盒子水平方向，可以通过属性改变主轴方向  
2.交叉轴：与主轴垂直的就是交叉轴；  
小结：【弹性布局】改变的是【容器内部】的布局方式  
从流式布局改变成弹性布局  
布局方式的规律是沿着【主轴起始方向】排列，在【主轴方向】有不同的对齐方式；  
当容器中的流发生变化时，子元素也会受到影响；由块元素变成行内块；

**display：flex 的十二个属性**  
6个作用于父容器，6个作用于子项目  
作用于父容器的6个属性：  
**1.flex-direction属性：决定主轴的方向**  
row（默认值）：主轴为水平方向，起点在左端  
row-reverse：追轴在水平方向，起点在右端  
column：主轴为垂直方向，起点在上沿；  
column-reverse：主轴为垂直方向，起点在下沿

2.flex-wrap属性：定义：如果一条轴线排不下，是否换行，如何换行  
nowrap：（默认值）不换行，当容器宽度不够时，每个项目会被挤压宽度；  
wrap：换行，并且第一行在容器最上方；  
wrap-reverse：换行，并且第一行在容器最下方；  
3.flex-flow ：  
是【flex-direction和flex-wrap】的缩写形式，默认值是：flex-flow:row wrap;  
4.justify-content属性：定义：项目在主轴上的对齐方式  
（此属性与主轴方向息息相关）  
主轴方向：row-起点在左边，row-reverse-起点在左边，column-起点在上边，column-reverse-起点在下边  
flex-start（默认值）：项目位于主轴起点  
flex-end：项目位于主轴终点  
center：居中  
space-between：两端对齐，项目之间的间距都相等。（开头和最后的项目，与父容器边缘没有间隔）  
space-around：每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。（开头和最后的项目，与父容器边缘有一定的间隔）；  
5.align-items属性：定义：项目在交叉轴上如何对齐  
flex-start：交叉轴的起点对齐；  
flex-end：交叉轴的终点对齐；  
center：交叉轴的中点对齐；  
baseline：项目的第一行文字的基线对齐。（文字的行高，字体大小会影响美航的基线）  
stretch（默认值）：如果项目未设置高度或设为 【auto】，将占满整个容器的高度。  
6.align-content属性：定义：多跟轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。  
（当项目换为多行时，可使用align-content取代align-items）  
flex-start：与交叉轴的起点对齐；  
flex-end：与交叉轴的终点对齐；  
center：与交叉轴的中点对齐；  
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。  
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。  
stretch（默认值）：轴线占满整个交叉轴；

**2.作用于子项目中的6大属性**  
1.order属性：定义：项目中的排列顺序。数值越小，排列越靠前。默认值为0；  
2.flex-grow属性:定义：项目的放大比例。默认值是0；即如果存在剩余空间，也不放大；  
3.flex-shrink属性：定义：项目的缩小比例，默认值是1，即如果空间不足，该项目将缩小；  
4.flex-basis定义：项目占据的株洲空间。（如果主轴方向为水平方向，则设置这个属性，相当于设置项目的宽度。原来的【width】将会失效）；  
5.flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值是0，1，auto。然后两个属性可选。  
6.align-self：定义：单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性；  
属性值：与align相同，默认值为auto，表示继承父元素容器的align-items属性值；