css flex布局学习笔记

<!-- 写在父盒子元素里面 -->

flex-direction属性

row  默认行为主轴（row），跟着主轴来排列

row-reverse 在主轴右边的方向进行排列 就是第一个子盒子在右边，往左排列，以此类推

column 默认列为主轴，遵循列来进行排列，x轴就成了侧轴

justify-content属性 定义了项目在主轴上的对齐方式 首先要设定谁是主轴谁是侧轴

flex-start 默认从左边开始

flex-end 默认从右边开始

center 默认在中间对齐

space-around 平均分配剩余空间（相当给每个盒子加上margin属性）

space-between 先两边贴边，再分配剩余的空间（这个为第一个盒子的左边margin与最后一个盒子的右margin都为0）

flex-wrap属性 flex布局中，默认的子元素是不换行的，如果装不开，子元素的盒子宽度会变小

nowrap 默认值，不换行

wrap 换行

align-items 设置侧轴上的子元素排列方式（单行）首先要设定谁是主轴谁是侧轴

flex-start 默认从上边开始

flex-end 默认从下边开始

center 从中间开始

stretch 将盒子进行纵向拉伸（沿着侧轴方向）子盒子不能写高度，否则无法拉伸

align-content 多行属性 用于设置侧轴上的子元素的排列方式

center 垂直居中

flex-flow属性 为flex-direction和flex-wrap属性的复合属性

第一个属性为确定主轴，第二个属性为确定是否换行

<!-- 写在子盒子元素里面 -->

flex属性 用于来分配剩余空间占据的份数 此属性写在子盒子中，用于分配自身盒子的大小

还可以用百分比表示（有强制换行的功能） 默认子盒子占据当前父盒子主轴的百分之几，便可以实现挤压盒子的功能

align-self属性 控制子盒子自身在侧轴上的排列方式，可以覆盖父元素的align-items属性

flex-start 此自身元素默认从上边开始

flex-end 此自身默认从下边开始

center 此自身从中间开始进行排列

order属性 控制子盒子自身的排列顺序 数值越小越靠前

背景线性渐变

background:-webkit-linear-gradient(起始方向，颜色1，颜色2，...) 起始方向默认为从上到下