flex属性

flex布局原理

原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
ps:

• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=flex布局。
• 一般默认下，flex属性会让所有子元素放在一行，如果装不开会缩小子元素的宽度放到父元素中。
  写一下的属性前，均要设置display:flex;

flex布局父项常见属性

flex-direction设置主轴方向

• 主轴方向（即项目的排列方向），子元素跟随主轴方向。
• 当默认主轴为x轴方向row，则侧轴为y轴方向。
  属性值：
  row:默认值从左到右
  row-reverse：从右到左
  column:从上到下
  column-reverse:从下到上

flex布局子项常见属性

justify-content 设置主轴上的子元素排列方式

flex-wrap子元素是否换行

属性值：
nowrap:不换行；
wrap：装不下时自动换行；

-align-item设置侧轴子元素排列

-align-content设置侧轴子元素排列

align-content和align-items区别

flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性
例子：

flex布局子项常见属性

flex属性

例子：




nth-child(1)表示第一个子盒子；
flex:1;表示盒子平分剩余空间的一份

渐变颜色参数linear-gradient

参考H马前端v6.5视频教学