flex布局详解

简述

　　弹性布局是css3新引入的布局模式，英文是flexbox，他决定了元素如何在页面上排列，使他们能在在不同的屏幕尺寸和设备下可预测地展现出来。

　　本质就是一个盒子，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间

核心概念

　　大的容器盒子叫 flex container ，被包裹在内的元素叫 flex item

　　从做左到右的分界轴坐标叫主轴，从上到下的分界轴叫交叉轴

　　项目会沿主轴方向进行排列，如果空间不够会沿交叉轴方向另起一行

　　将一个块级元素设置为弹性容器，只需要设置该元素的display值为flex

.container{
   display: flex; 
}

容器属性

flex-direction

　　用于指定主轴方向

row	从左到右，默认值
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

flex-wrap

　　默认为元素在主轴方向一直堆叠，也用于指定元素放不下时，在哪里新起一行

justify-content

　　控制item在主轴方向的对齐方式

flex-start	默认左对齐
flex-end	右对齐
center	居中
space-between	项目和容器之间没有空隙，项目之间有间隔
space-around	项目与项目之间有间隔，间隔是项目与容器之间间隔的两倍

align-items

　　用于控制项目在交叉轴方向上的对齐方式

stretch	默认值，占满交叉轴上的所有空间
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中心对齐
baseline	所有项目的内容在同一水平

 

align-content

　　定义多根轴线的对齐方式，个人理解这里的多根轴线指的是多个主轴（设定了flex-warp属性，另起行）

flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch	轴线占满整个交叉轴

 

Item属性

order

　　用于规定item的排列顺序，越小排越前

 

flex-grow

　　定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

　　如果item的flex-grow都是 1 ，则它们将等分剩余空间

　　其他数字则按比例分配空间

 

flex-shrink

　　定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

　　如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小

　　如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

align-self

　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

References

https://css-tricks.com/snippets/css/a-guide-to-flexbox （官方文档）

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox （mdn的详解）

https://juejin.cn/post/7085239691728912414（掘金，基本是看这个学的，还有动图好爽）

https://blog.51cto.com/yszr/2820428

https://juejin.cn/post/7183221193636315173

https://www.bilibili.com/video/BV1di4y1U75N/?spm_id_from=333.337.search-card.all.click （弹性布局示例）