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;

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

推荐阅读更多精彩内容