谈谈 float、flex、grid三种常用布局方法

CSS常用布局方法有：float布局、flex布局和grid布局。

如果兼容IE 9，则选用float布局，若无此项需求，则考虑flex布局和grid布局。当只需要兼容最新浏览器时，采用grid布局更方便。

float布局

步骤

1. 子元素上加 float:left和width

2. 在父元素上加clearfix

   

经验之谈

• 留一些空间，或者最后一个不设width，也可以设置一个max-width。

  

• 不需要做响应式，因为手机上没有IE，而这个布局是专门为IE准备的。

• IE 6/7 存在双倍margin bug：在float元素左边加入一个外边距，会变成双倍边距。解决办法如2所示，IE 6/7会识别_margin-left: 5px;，在其他浏览器中自动报错不执行。或者加display:inline-block

  

  

flex布局

容器container

让一个元素变成flex容器

.container{    display: flex; /* or inline-flex */}

改变items流动方向（主轴）

.container{    flex-direction: row | row-reverse | column | column-reverse;}

改变折行

.container{    flex-wrap: npwrap | wrap | wrap-reverse;}

主轴对齐方式

默认是flex-start

.container{    justify-content: flex-start | flex-end | center}

.container{    justify-content: space-between | space-around | space-evenly}

次轴对齐（默认次轴是纵轴）

默认是flex-start

.container{    align-items: flex-start | flex-end | center | stretch}

多行内容

默认是flex-start

.container{    align-content: flex-start | flex-end | center | stretch | space-between | space-around}

flex item 有哪些属性

item 上面加 order

默认是0

负数 -> 0 ->正数

item 上面加 flex-grow

默认是0

flex-shrink 控制如何变瘦

一般写flex-shrink: 0;防止变瘦，默认是1

中间缩的快：

flex-basis 控制基准宽度

默认是auto

flex:flex-grow flex shrink flex-basis

如果要缩写，只能三个一起写

align-self 定制 align-items

Grid布局

一维布局用Flex，二维布局用Grid

称为container

.container{    display: grid | inline-grid;}

行和列

.container{    grid-template-column: 40px 50px auto 40px 50px;    grid-template-rows: 25% 100px auto;}

给每条线取名

.container{    grid-template-columns: [first] 40px [line2] 50px [line3] auto [co14-start] 50px [five] 40px [end];    grid-template-rows: [row1-statr] 25% [row1-end] 100px [third-line] auto [last-line];}

取名后，item可以设置范围，如：

.item-a{    grid-row-start: row1-start;    grid-row-end: 3;    grid-column-start: 2;    grid-column-end: five;}

fr -freespace

.container{    grid-template-columns: 1fr 1fr 1fr;}

.container{    grid-template-columns: 1fr 1fr 5px 1fr;}

分区 grid-template-areas

.item-a{    grid-area: header;}.item-b{    grid-area: main;}.item-c{    grid-area: sidebar;}.item{    grid-area: footer;}​.container{    display: grid;    grid-template-columns: 50px 50px 50px 50px;    grid-template-rows: auto;    grid-template-areas:        "header header header header"        "main mian . sidebar"        "footer footer footer footer";}

空隙 gap

.container{    grid-template-columns: 100px 50px 100px;    grid-template-rows: 80px auto 80px;    grid-column-gap: 10px;    grid-row-gap: 15px;}