CSS-Flex布局

概念

弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器。

主轴和侧轴

主轴：flex容器的主轴，默认是水平方向，从左向右。
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。

使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。

属性

flex-direction 属性

flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：

属性值	描述
row	从左到右水平排列子元素（默认值）
column	从上到下垂直排列子元素
row-reverse	从右向左排列子元素
column-reverse	从下到上垂直排列子元素

flex-wrap 属性

flex-wrap：控制子元素溢出时的换行处理。

justify-content 属性

justify-content :控制子元素在主轴方向上的排列方式。属性值可以是：

• flex-start 从主轴的起点对齐（默认值）
• flex-end 从主轴的终点对齐
• center 居中对齐
• space-around 在父盒子里平分
• space-between 两端对齐 平分

align-items 属性

align-items：设置子元素在侧轴上的对齐方式。属性值可以是：

• flex-start 从侧轴开始的方向对齐
• flex-end 从侧轴结束的方向对齐
• baseline 基线 默认同flex-start
• center 中间对齐
• stretch 拉伸