阮一峰博客:
(1)Flex 布局教程:语法篇
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
(2)Flex 布局教程:实例篇
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
(3)grid布局
https://blog.csdn.net/weixin_44202459/article/details/88653661
目录
4. flex属性:flex-grow, flex-shrink 和 flex-basis的简写
一、flex布局(弹性布局)
是一个一维系统,用来为盒状模型提供最大的灵活性。
主要思想:是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(扩展来
填满可用空间,或缩小他们以防止溢出容器。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
1. justify-content属性
justify-content
属性定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
2. align-items属性
align-items
属性定义项目在交叉轴上如何对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
3. align-content属性
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
该属性可能取6个值。
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
4. flex
属性:flex-grow
, flex-shrink
和 flex-basis
的简写
(1) flex-grow属性
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
.item { flex-grow: <number>; /* default 0 */ }
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
(2) flex-shrink属性
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item { flex-shrink: <number>; /* default 1 */ }
如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
(3) flex-basis属性
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */ }
它可以设为跟width
或height
属性一样的值(比如350px),则项目将占据固定空间。
(4) flex属性
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
5. align-self属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
二、flex布局的应用
下面,就来看看Flex如何实现,从1个点到9个点的布局
如果不加说明,本节的HTML模板一律如下。
<div class="box"> <span class="item"></span> </div>
上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。
1. 单项目
首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。
.box { display: flex; }
设置项目的对齐方式,就能实现居中对齐和右对齐。
.box { display: flex; justify-content: center; }
.box { display: flex; justify-content: flex-end; }
设置交叉轴对齐方式,可以垂直移动主轴。
.box { display: flex; align-items: center; }
.box { display: flex; justify-content: center; align-items: center; }
.box { display: flex; justify-content: center; align-items: flex-end; }
.box { display: flex; justify-content: flex-end; align-items: flex-end; }
2. 双项目
.box { display: flex; justify-content: space-between; }
.box { display: flex; flex-direction: column; justify-content: space-between; }
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.box { display: flex; } .item:nth-child(2) { align-self: center; }
.box { display: flex; justify-content: space-between; } .item:nth-child(2) { align-self: flex-end; }
3. 三项目
.box { display: flex; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; }
4. 四项目
.box { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between; }
HTML代码如下。
<div class="box"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div>
CSS代码如下。
.box { display: flex; flex-wrap: wrap; align-content: space-between; } .column { flex-basis: 100%; display: flex; justify-content: space-between; }
5. 六项目
.box { display: flex; flex-wrap: wrap; align-content: space-between; }
.box { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; }
HTML代码如下。
<div class="box"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div> </div>
CSS代码如下。
.box { display: flex; flex-wrap: wrap; } .row{ flex-basis: 100%; display:flex; } .row:nth-child(2){ justify-content: center; } .row:nth-child(3){ justify-content: space-between; }
6. 九项目
.box { display: flex; flex-wrap: wrap; }
三、grid布局(网格布局)
是一个二维系统,可以同时处理行和列。
主要思想:grid布局可以像表格一样将页面容器分割成一块一块的区域,定义子元素的排布和位置。其所有直接子元素(直接子元素的子元素不包含在内)自动成为容器成员,称为grid项目(grid item),简称“项目”
使用:对父元素设置dispay:grid;grid-template-colums和grid-template-rows来设置几行几列,然后对子元素设置占据几行几列
1. grid-template-columns/grid-template-rows属性
使用以空格分隔来定义网格的行和列,它们之间的空格表示网格线
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
fr单元允许等分网格容器剩余可用空间来设置网络轨道的大小。例如,下面的代码会将每个网格项设置为网格容器宽度的三分之一:
.container{
grid-complate-columns: 1fr 1fr 1fr;
}
剩余可用空间是除去所有非灵活网格项之后计算得到的。例:可用空间总量减去50px后。再给fr单元的值3等分:
.container{
grid-complate-columns: 1fr 50px 1fr 1fr;
}
2. grid-template-areas属性
通过引用grid-area属性指定的网格区域的名称来定义网络模板,重复网格区域的名称会使内容扩展到这些单元格(不理解可先看示例代码)。这个语法本身可看做网格的可视化结构。属性值只有3个:
<grid-area-name>:由网格项grid-area指定网格区域的名称
.点号:代表一个空的网格单元
none:不定义网格区域
声明中的每一行都需要有相同数量的单元格,可以使用任意数量的.
来声明单个空单元格。
示例:创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行由footer区域组成
.item-a{
grid-area: header;
}
.item-b{
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container{
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
grid-template属性
- 在单个声明中定义
grid-template-columns
、grid-template-rows
和grid-template-areas
的简写,例:
.container{
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
/*以上代码可简写为以下代码*/
.container{
grid-template:
[row1-start] "header header header" 25px [row1-end];
[row2-start] "footer footer footer" 25px [row2-end];
/ auto 50px auto;
}