flex布局

作者: Cissy_fba3 | 来源:发表于2018-09-29 01:09 被阅读0次

flex布局
初见FLEX
Flex 布局教程
css flex布局详解
Flex
flex布局学习笔记
6Flex 布局
css flex
Flex布局（语法篇）
Day02_flex布局

flex之前，我们通常用以下css布局：

normal flow（正常流，文档流）
float + clear
position relative + absolute
display inline—block
margin （正负）

flex布局的特点：

块级元素布局侧重竖直方向，行内元素布局侧重水平方向，flex布局与方向无关。
flex布局可以实现空间自动分配，元素自动对齐（弹性、灵活）
flex适用于简单的线性布局，更复杂的交给grid布局

基本概念：

基本概念

主轴方向：当flex-direction的方向为row时，主轴方向为水平；当flex-direction为column时，主轴方向为竖直(默认为row)
flex可分为container属性(爸爸属性)和item属性(儿子属性)

container属性：

爸爸的属性

flex-direction：row(items从左往右水平排列) / row-reverse（从右往左水平排列）/column(items从上往下一列一列排，相当于block元素) /column-reverse~~~~~(默认为row)

flex-wrap 换行：wrap（flex-derection默认为row且不换行，所以items会挤在一行，这时设置wrap换行）/nowrap(不换行，默认值)

flex-flow 上面两个属性的简写:row wrap；(<-eg）

justify-content 主轴方向的对齐方式：space-between(两端对齐，项目之间的间隔都相等)/space-around(每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍)/flex-start（默认值，左对齐）/flex-end(右对齐)/center( 居中)

align-items 侧轴方向上的对齐方式:flex-start(交叉轴的起点对齐)/flex-end(交叉轴的终点对齐)/center(交叉轴的中点对齐)/baseline(项目的第一行文字的基线对齐)/stretch（默认值,如果项目未设置高度或设为auto，将占满整个容器的高度）

常用：flex-direction、flex-wrap、justify-content 、align-items

item属性：

儿子的属性

flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 eg：.item {flex-grow:<number>;/* default 0 */}

flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 eg：flex-shrink:<number>;/* default 1 */

flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。一般不用
eg：.item {flex-basis:<length> | auto;/* default auto */}
flex：属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 eg：.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可以为正数也可以为负数。
eg：.item {order:<integer>;}

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

常用：flex-grow、order

******** 实例：********

1.完美居中
eg：

<div class=parent>
   <div class=child>nxachsjbcucbdj</div>
 </div>
 .parent{
   width:300px;
   height:300px;
   diplay:flex;
   justify-content:center; 
   align-item:center;
}

2.手机布局
eg：

        <header></header>
        <main></main>
        <footer></footer>
        body{height:100vh;  diaplay:flex;}
        header{ height:80px }
        main{ flex-grow:1 }
        footer{ height:80px }

3.电脑双飞翼布局

参考：阮一峰老师http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html