2018-07-18

今天主要学习了flex布局，学习笔记如下：

1.指定flex布局：

          display：flex(任意容器) / inline-flex(行内元素)；

          设为flex布局后子元素的float，clear和vertical-align属性会失效；

2.基本概念：

           flex容器有两根轴，水平叫主轴，垂直叫交叉轴；

           项目默认沿轴排列，在平面上沿xy轴构出项目；

3.容器属性及使用方法：

           flex-direction（项目排列方向）：row（默认 从左到右）/row-reverse(从右到左) / column（从上到下）/column-reverse(从下到上)；

           flex-wrap（定义换行）：nowrap（默认 不换行）/wrap（从上到下换行）/wrap-reverse（从下到上换行）；

           flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式： flex-flow: || ;

           justify-content属性（对齐方式）：flex-start（默认 左对齐）/flex-end（右对齐）/center（居中）/

space-between（两端对齐）/space-around（每个项目两侧间隔相等）；

           align-items（定义y轴对齐）：flex-start（天花板对齐）/flex-end（地板对齐）/center（中线对齐）/

baseline（第一行文字基线对齐）/stretch（默认 高度占满整个容器）；

           align-content（多行项目对齐）：flex-start（靠上排列）/flex-end（靠下排列）/center（中心开始排列）/

space-between（上下两端对齐）/space-around（每行间隔两侧相等）/stretch（默认 高度填满）；

4.项目属性及使用：

           order(项目排列数值从小到大)：number /flex-grow（放大比例）：num /flex-shrink（缩小比例）：num /

flex-basis：|number;(设置主轴长度) / flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto / 

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch，eg：align-self: auto | flex-start | flex-end | center | baseline | stretch;

今天还模仿了百度的界面，只是模仿了界面就觉得人家很厉害，激励了我学习的想法。