flex布局学习

本文部分图片来自阮一峰博客，若侵权，望告知。

1.CSS学习

w3cschool

2.css的一些标签学习

css图

标签
width：（文字）设置段落的宽度
height：（文字）设置段落的高度
color：（文字）颜色
font-size：（文字）字体大小

text-align：（文字）文本对齐方式，有left，right，center，justify（两端对齐）这个和word里面的对其方式类似
verticial-align：（文字）竖直方向对齐
text-indent:（文字）缩进多少
font-family：（文字）字体设置，Serif ，Sans-serif ，Monospace，Cursive ，Fantasy五种默认的字体
font-style：（文字）斜体设置
font-weight：（文字）粗体设置

margin：（区域）外边距，这个区域和外面的距离
padding：（区域）内边距，即里面的文字等和这个边框的距离
border：（区域）边框宽度属性
border-top：（区域）上边框的宽度
border-radius：（区域）圆角边框
border-bottom：（区域）下边框的宽度

line-height：（区域）设置两个区域之间的行间距
box-shadow：（区域）添加阴影

position：（定位）可以是absolution绝对定位，和static默认定位，和relative相对定位
top：（定位）距离顶部的距离
bottom：（定位）距离底部的距离

background：（背景）可以是颜色，位置，尺寸，区域等等

display：（元素）该元素使用什么样的形式展示，是不展示（none），默认（inline），列表展示（list-item）
vertical-align：（元素）垂直方向对其的方式，有父元素基线（baseline），顶端对其（top），底端对其（bottom）。在display属性为flex时这个属性就失效了。
z-index：（元素）堆叠顺序

3.css的flex学习

flex是弹性盒子（flexible box）的缩写
使用：
display:flex;
将显示通过flex进行，行内的元素：
display:inline-flex;

（1）基础

图片

如上图，main axis为主轴，cross axis为交叉轴，主轴的开始和结束分别为main start和main end 交叉轴的开始和结束为cross start 和cross end.

（2）属性

有如下属性可以设置在flex容器中：

flex-direction：主轴方向，row还是column.四种见下图： row | row-reverse | column | column-reverse
flex-wrap：控制单行还是多行，nowrap为单行，wrap为多行，wrap-reverse为反转wrap排列
flex-flow：是上面两个的复合，用在一个设置中。
justify-content：主轴的对齐方式，flex-start，flex-end，center，space-between，space-around
align-items：交叉轴的对齐方式，flex-start，flex-end，center，baseline，stretch（默认）
lign-content：多根轴线的对齐方式，flex-start，flex-end，center，space-between，space-around，stretch（默认）

对齐方式

从左向右分别为：column-reverse,column,row,row-reversse

（3）项目属性（每一个元素）

可以将6个属性设置在项目上面

order属性

默认0，可以定义项目的排列顺序，数值越小越靠前

flex-grow属性

定义放大比例，默认为0，不放大

flex-shrink属性

定义缩小比例，默认为1.如果空间不足，则将项目缩小

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

slign-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto