什么是 flex 布局
直接设置 display: flex
或display:inline-flex
的元素成为 flex 容器,里面的子元素成为 flex 子项。
flex 和 inline-flex 的区别是:inline-flex 容器为行内特性,因此可以和图片文字一行现实;flex 容器保持块状特性,宽度默认 100%。
flex 布局相关属性分为两种,一种作用在 flex 容器上,一种作用在 flex 子项上。无论作用在 flex 容器上,还是作用在 flex 子项上,都是控制 flex 子项的呈现,只是前者控制整体,后者控制个体。
flex容器:
flex容器 | 特性 | 可选值 |
---|---|---|
flex-direction | 控制子项整体布局方式 | row(行,方向为当前文档水平流),row-reverse,column,column-reverse order |
flex-wrap | 控制子项整体单行显示还是折行显示 | nowrap(单行显示,不换行) 、wrap(宽度不足换行)、wrap-reverse(从下往上,宽度不足换行) |
flex-flow | 是 flex-direction 和 flex-wrap 的缩写 | 多属性时,空格分割 |
justify-content | 水平方向子项的对齐和分布方式 | flex-start(左对齐)、flex-end、center、space-between(两端对齐)、space-around(等宽环绕)、space-evenly(两侧空白间距完全相等) |
align-items | 子项们在垂直方向上的对齐方式 | stretch(子项拉伸)、flex-start(顶部对齐)、flex-end、center、 baseline(容器基线) |
align-content | 垂直方向子项的对齐和分布方式 | stretch(子项等比拉伸)、flex-start(顶部对齐)、flex-end、center、space-between(两端对齐,等分)、space-around(等宽环绕)、space-evenly(两侧空白间距完全相等) |
flex子项:
flex子项 | 特性 | 可选值 |
---|---|---|
order | 控制子项排序位置 | 默认值0,想排在前面的话,设置比0小的数,后面与之相反 |
flex-grow | 剩余空白间隙的扩展 | 默认值0,如果只有一个子项设置,值 < 1 的话,按总剩余的比例。>1则独享所有剩余空间。如果多个 flex,按比例分配 |
flex-shrink | 容器不足时,单个元素的收缩比例 | 默认值1,为 0 的话不收缩 |
flex-basis | 宽度 | 如果同时设置了 width 和 flex-basis,会忽略width,当剩余空间不足时,会缩起,如果设置为 auto,会按照内容的多少来等比例放大和缩小。 |
flex | 是flex-grow、flex-shrink、flex-basis 缩写 | 默认值:0 1 auto |
align-self | 控制垂直对齐方式 | stretch(子项拉伸)、flex-start(顶部对齐)、flex-end、center、 baseline(容器基线) |
flex 详解
flex:1 === flex: 1 1: 实现了三个不同内容的 div 平分空间。
在分家产上,flex 的作用就是制定每个人该如何分配到家产的规则:
- flex-basis 分配固定的家产数量
- flex-grow 剩余家产仍有富余的时候如何分配
- flex-shrink 剩余家产不足时如何分配
如果 flex 的属性只有一个值:
- 数值,表示 flex-grow 的值,flex-basis 和 felx-shrink 都是默认值(auto 1)
- 长度值:表示 flex-basis 的值,其他为默认值
flex 数值值:
- initial: 默认值,等同于
flex: 0 1 auto;
,不会增长变大占据 flex 容器的剩余空间,会收缩变小以适应容器,尺寸根据自身宽高属性进行调整。 - auto:等同于
flex: 1 1 auto
,子项会增长变大占据 flex 容器的剩余空间,会收缩变小以适应容器,尺寸根据自身宽高属性进行调整 - none:等同于
flex: 0 0 auto
,子项不会增长变大占据 flex 容器的剩余空间,也不会收缩变小以适应容器,尺寸根据自身宽高属性会进行调整
grid
网格布局(grid)是最强大的 CSS 布局方案,它将网页分成一个个网格,可以任意组合不同的网格,作出各种各样的布局。
grid 布局和 flex 布局有一定的相似性,都可以指定容器内部多个子项的位置,但 flex 布局是轴线布局,只能指定“子项”针对轴线的位置,可以看作是一维布局。grid 布局则是将容器划分成“行”和“列”,产生单元格,然后指定“子项”所在的单元格,可以看作是二维布局。
grid 的属性
grid 布局的属性分为两类,一类定义在容器上面,称为容器属性,一类定义在子项上,称为子项属性。
display: grid/inline-grid;
:指定一个容器采用网格布局;
grid 容器:
flex容器 | 特性 |
---|---|
grid-template-columns | 定义每列的列宽 |
grid-template-rows | 定义每行的行高 |
grid-row-gap | 设置行和行之间的间隔(行间距) |
grid-column-gap | 设置列和列之间的间隔(列间距) |
grid-gap | grid-column-gap 和 grid-row-gap 的合并简写形式 |
grid-template-areas | 用于定义区域,.表示不用 |
grid-auto-flow | 容器的子元素按照顺序自动放置的顺序,先行后列(row),或者先列后行(column) |
justify-items | 控制子项 内容 的水平位置 |
align-items | 控制子项 内容 的垂直位置 |
place-items | justify-items 和 align-items 的合并简写形式 |
justify-content | 整个内容区域在容器里面的水平位置 |
align-content | 整个内容区域在容器里面的垂直位置 |
place-content | justify-content 和 align-content 的合并简写方式 |
grid-auto-columns | 现有网格外部,自动生成多余的网格的列宽 |
grid-auto-rows | 现有网格外部,自动生成多余的网格的行高 |
grid-template | 是 grid-template-columns、grid-template-rows、grid-template-areas 的合并简写方式 |
grid | 是 grid-template-columns、grid-template-rows、grid-template-areas、grid-auto-columns、grid-auto-rows、grid-auto-flow 的合并简写方式 |
grid-template-columns 和 grid-template-rows 可用的方法:
- repeat(count, value) 简化重复的值:
- repeat(3, 33.33%): 宽度为33.33%的网格重复3次
- repeat(2, 100px 20px 80px):第一、四网格为100px,第二、五网格为20px,第三、六网格为 80px;
- repeat(auto-fill,100px):每个网格100px,希望容器的行或者列容纳最多的 100px 的子项;
- fr:表示等比关系,
1fr 2fr
表示后者是前者的两倍 - minmax:产生一个长度范围,表示长度就在这个范围之中,它接受两个参数,分别为最小值和最大值。
minmax(100px, 1fr):表示不小于100px,不大于 1fr
- auto:由浏览器自己决定长度
- 网格线的名称:可用方括号,指定每一根网格线的名字,方便以后引用
grid 子项:
flex子项 | 特性 |
---|---|
grid-column-start | 左边框所在的垂直网格线 |
grid-column-end | 右边框所在的垂直网格线 |
grid-row-start | 上边框所在的水平网格线 |
grid-row-end | 下边框所在的水平网格线 |
grid-column | 是 grid-column-start 和 grid-column-end 的合并缩写 |
grid-row | 是 grid-row-start 和 grid-row-end 的合并缩写 |
grid-area | 指定放在哪一个区域,也可以是上面的缩写 |
justify-self | 子项内容的水平位置 |
align-self | 子项内容的垂直位置 |
place-self | 是 align-self 和 justify-self 的合并缩写 |
九宫格
<div class="square">
<ul class="square-inner flex">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
grid 的方式
ul {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
}
flex 的方式
li {
list-style: none;
width: 100px;
height: 100px;
}
.square {
width: 310px;
}
ul {
display: flex;
flex-wrap: wrap;
}
float
li {
float: left;
list-style: none;
height: 100px;
width: 100px;
}
ul {
width: 310px;
}
ul::after{
content: "";
display: block;
clear: both;
visibility: hidden;
}
table 布局
<table class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>table</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
.table{
width: 300px;
border-collapse: collapse;
box-sizing: border-box;
}
.table td{
width: 100px;
border: 1px solid white;
height: 100px;
background: red;
}