一、flex布局
flex 是 flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
- 当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align 属性将失效
- flex布局=伸缩布局=弹性布局=伸缩盒布局=弹性盒布局
二、flex布局父项常见属性
以下6个属性是对父元素设置的:
- flex-direction:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-items:设置侧轴上的子元素的排列方式(单行)
- align-content:设置侧轴上的子元素的排列方式(多行)
- flex-flow:复合属性,相对于同时设置了flex-direction和flex-wrap
1. flex-direction:设置主轴的方向
属性值 | 说明 |
---|---|
row | 默认从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |