css-flex布局属性

flex 布局的优势

1. flex 布局的子元素不会脱离文档流
2. flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范

弹性盒子、子元素

1. 弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器
   • 声明：使用 display:flex 或 display:inline-flex 声明的父容器
   • flex-direction 属性
     • row：从左到右水平排列子元素
     • column：从上到下水平垂直子元素
     • row-reverse：从右到左水平排列子元素
     • column-reverse：从下到上水平垂直子元素
   • flex-wrap 属性：控制子元素溢出时换行处理
   • justify-content 属性：控制子元素在主轴上的排列方式
2. 子元素/弹性元素：指的是父容器里面的子元素们
   • justify-content 属性：主轴上的对齐方式
     • flex-start：从主轴的起点对齐
     • flex-end：从主轴的终点对齐
     • center：居中对齐
     • space-around：在父盒子里平分
     • space-between：两端对齐平分
   • align-items 属性：侧轴上的对齐方式
     • flex-start：从侧轴开始的方向对齐
     • flex-end：从侧轴结束的方向对齐
     • baseline：基线 默认同flex-start
     • center：中间对齐
     • stretch：拉伸

主轴和侧轴

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