flex布局原理
虚线框是div 里面的小圆圈是span
主要了解 容器 和 项目 的概念
flex布局父项常见属性
以下6个属性是对父元素设置的:
- flex-direction: 设置主轴的方向
- justify-content: 设置主轴上的子元素排列方式
- flex-wrap: 设置子元素是否换行
- align-items: 设置侧轴上的子元素排列方式(单行)
- align-content: 设置侧轴上的子元素排列方式(多行)
- flex-flow: 复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex-direction 设置主轴方向
属性值:
- row: 默认值从左到右
- row-reverse:从右到左
- column: 从上到下
- column-reverse:从下到上
注意: 主轴和侧轴是会变化的,就看flex-direction 设置谁为主轴,剩下的就是侧轴,我们的子元素是根据主轴来排列的
justify-content 设置主轴上子元素的排列方式
justify-content 属性定义了项目在主轴上的对齐方式
属性值:
- flex-start: 默认值从头部开始,如果主轴是x轴,则从左到右
- flex-end: 从尾部开始排列
- center: 在主轴居中对齐(如果主轴是x轴则水平居中)
- space-around: 平分剩余空间
- space-between: 先两边贴边 再平分剩余空间(重要)
注意: 使用这个属性之前一定要确定好主轴是哪个
flex-wrap 设置子元素是否换行
属性值:
- nowrap : 默认值,不自动换行,会把内容挤压变小
- wrap: 内容顶到边框时会自动换行
align-items 设置侧轴上的子元素排列方式(单行)
属性值:
- flex-start 从上到下
- flex-end:从下到上
- center: 挤在一起居中(垂直居中)
- stretch: 拉伸(默认值)
注意: 该属性是控制子项在侧轴(默认是y轴)上的排列方式 ,在子项为单项的时候使用
align-content 设置侧轴上的子元素排列方式(多行)
属性值:
- flex-start: 默认值在侧轴的头部开始排列
- flex-end:在侧轴的尾部开始排列
- center: 在侧轴中间显示
- space-around: 子项在侧轴平分剩余空间
- space-between: 子项在侧轴先分布在两头,再平分剩余空间
- stretch: 设置子项元素高度平分父元素高度
注意: 该属性值只能用于子项出现换行的情况,在单行的情况下是不起效果的
align-content 和align-items 的区别
flex-flow:
flex-flow属性是flex-direction 和 flex-wrap的复合属性
用法:
- flex-flow:row wrap;
flex布局子项常见属性
flex属性(重点)
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
用法:
- .item{flex: number;}
- 子盒子里还可以写 % ,是相对于父级来说的 如: flex:20%;
align-self 属性 控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有 与其他项目不一样的对齐方式,可覆盖 align-items 属性。
默认值为auto,表示继承父元素的 align-items 属性,如果没有父元素则等同于 stretch
order 属性 定义项目的排列顺序
数值越小,排列越靠前,默认为0
注意: 和 z-index 不一样
常见flex布局思路
客串css3 特性:背景线性渐变
穿插一个用css3 制作箭头的方法
用after伪元素添加右边的箭头,方法:一个上边框一个右边框,然后顺时针旋转45°