一.flex弹性布局
Flex弹性盒模型:
随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
| 作用在flex容器上 | 作用在flex子项上 |
|---|---|
| flex-direction | order |
| flex-wrap | flex-grow |
| flex-flow | flex-shrink |
| justify-content | flex-basis |
| align-items | flex |
| align-content | align-self |
flex弹性盒定义方法:display: flex; 属性
作用在flex容器上
1.flex-direction
flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
示例:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
flex-direction:row;
}
#box div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
</style>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
| 值 | 描述 | 效果 |
|---|---|---|
| row | 按行从左到右 |  |
| row-reverse | 按行从右到左 |  |
| column | 按列从上到下 |  |
| column-reverse | 按列从下到上 |  |
2.flex-wrap
flex-wrap用来控制子项整体单行显示还是换行显示。
示例:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
/*
nowrap->默认值,不折行
wrap->宽度不足时折行
wrap-reverse->反向折行
*/
flex-wrap: wrap-reverse;
}
#box div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
| 值 | 描述 | 效果 |
|---|---|---|
| nowrap | 不折行 |  |
| wrap | 折行 |  |
| wrap-reverse | 反向折行 |  |
3.flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。
写法:
flex-flow: row nowrap;
4.justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式。
示例:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
justify-content: flex-start;
}
#box div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
| 值 | 描述 | 效果 |
|---|---|---|
| flex-start | 开头对齐 |  |
| flex-end | 结尾对齐 |  |
| center | 中间对齐 |  |
| space-between | 两端对齐 |  |
| space-around | 边缘两侧的空白只有中间空白宽度一半 |  |
| space-evenly | 每个flex子项两侧空白间距完全相等 |  |
5.align-items
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
示例:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
align-items: stretch;
}
#box div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
| 值 | 描述 | 效果 |
|---|---|---|
| stretch | flex子项拉伸 |  |
| flex-start | 顶部对齐 |  |
| flex-end | 底部对齐 |  |
| center | 垂直居中对齐 |
6.align-content
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
示例:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
align-content: stretch;
}
#box div {
width: 50px;
background: red;
text-align: center;
}
</style>
<body>
<div id="box">
<div>测试文本</div>
<div>测试文本测试文本</div>
<div>测试文本测试文本测试文本</div>
<div>测试文本测试文本测试文本测试文本</div>
</div>
</body>
| 值 | 描述 | 效果 |
|---|---|---|
| stretch | 每行等比例拉伸 |  |
| flex-start | 起始位置对齐 |  |
| flex-end | 结束位置对齐 |  |
| flex-center | 居中对齐 |  |
| space-between | 两端对齐 |  |
| space-around | 每行元素上下都享有独立不重复的空白空间 |  |
| space-evenly | 每一行元素都完全上下等分 |  |
作用在flex子项上
1.order
可以通过设置order改变某一个flex子项的排序位置.所有flex子项的默认order属性值是0.值越大越靠后
默认状态:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
}
#box div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
效果:
添加order排序:
<style>
#box div:nth-child(5){order: -1;}
#box div:nth-child(4){order: 0;}
#box div:nth-child(3){order: 1;}
#box div:nth-child(2){order: 2;}
#box div:nth-child(1){order: 3;}
</style>
效果:
2.flex-grow
属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0,取值范围为0-1
默认状态:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
}
#box div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
#box div:nth-child(2){background: yellow;}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
效果:
添加flex-grow:
<style>
#box div:nth-child(2){background: yellow;flex-grow:1;}
</style>
效果:
3.flex-shrink
属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。值越大收缩越严重,为0则不收缩
默认状态:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
}
#box div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
#box div:nth-child(2){background: yellow;}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
效果:
添加flex-shrink:
<style>
#box div:nth-child(2){background: yellow;}
</style>
效果:
4.flex-basis
flex-basis定义了在分配剩余空间之前元素的默认大小。(相当于写宽度,但是优先级大于宽度)
5.flex
flex属性是flex-grow，flex-shrink和flex-basis的缩写。优先级大于单独样式
写法:
flex:flex-grow值 flex-shrink值 flex-basis值(只写一个值时,代表grow)
6.align-self
align-self指控制单独某一个flex子项的垂直对齐方式。
默认状态:
<style>
#box {
width: 300px;
height: 300px;
border: black solid;
margin: 30px auto;
display: flex;
}
#box div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
#box div:nth-child(2){background: yellow;}
#box div:nth-child(3){background: blue;}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
效果:
添加align-self:
<style>
#box div:nth-child(2){background: yellow;align-self: center;}
#box div:nth-child(3){background: blue;align-self:flex-end;}
</style>
效果:
二.grid网格布局
Grid布局是一个二维的布局方法，纵横两个方向总是同时出现
| 作用在grid容器上 | 作用在grid子项上 |
|---|---|
| grid-template-columns | grid-column-start |
| grid-template-rows | grid-column-end |
| grid-template-areas | grid-row-start |
| grid-template | grid-row-end |
| grid-column-gap | grid-column |
| grid-row-gap | grid-row |
| grid-gap | grid-area |
| justify-items | justify-self |
| align-items | align-self |
| place-items | place-self |
| justify-content | |
| align-content | |
| place-content |
grid网格布局定义方法:display: grid; 属性
作用在grid容器上
1.grid-template-columns和grid-template-row
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。
示例:
<style>
#box{width: 300px;height: 300px;border: black dotted;display: grid;grid-template-rows:1fr 2fr 3fr;grid-template-columns: 1fr 2fr 3fr;}
#box div{border: black solid;}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
效果:
repeat语法:
/* repeat(区域个数,每个区域大小) ,如下为三行三列,每个区域为1fr*/
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
2.grid-template-areas和grid-template
area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template-rows , grid-template-columns和grid-template-areas属性的缩写。
grid-template-areas示例:
<style>
#box{width: 300px;height: 300px;border: black dotted;display: grid;grid-template-rows:1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";}
#box div{border: black solid;}
#box div:nth-child(1){grid-area: a1;}
#box div:nth-child(2){grid-area: a2;}
#box div:nth-child(3){grid-area: a3;}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
效果:
grid-template写法
#box {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
}
可以写成如下:
#box {
display: grid;
grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr
;
}
3.grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。css grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
初始状态:
<style>
#box {
width: 300px;
height: 300px;
border: black dotted;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
}
#box div {
border: black solid;
}
#box div:nth-child(1) {
grid-area: a1;
}
#box div:nth-child(2) {
grid-area: a2;
}
#box div:nth-child(3) {
grid-area: a3;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
效果:
添加grid-column-gap和grid-row-gap:
grid-row-gap: 10px;
grid-column-gap: 20px;
/* 还能写成grid-gap:10px 20px */
效果:
4.justify-items和align-items
justify-items指定了网格内部元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中,第一个参数值是纵,第二个是横。
默认状态:
<style>
#box {
width: 300px;
height: 300px;
border: black dotted;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
justify-items: stretch;
}
#box div{border: black solid;background: red;}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
| 取值 | 含义 | 效果(以justify-items为例) |
|---|---|---|
| stretch | 默认,拉伸.水平或垂直填充 |  |
| start | 左侧或顶部对齐 |  |
| end | 右侧或底部对齐 |  |
| center | 水平或垂直居中 |  |
5.justify-items和align-items
justify-content指定了整个网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中,第一个参数值是纵,第二个是横。
默认状态:
<style>
#box {
width: 500px;
height: 500px;
border: black dotted;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
justify-content: stretch;
}
#box div{background: red;border: black solid;}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
| 取值 | 含义 | 效果(justify-content为例) |
|---|---|---|
| stretch | 默认,拉伸.水平或垂直填充 |  |
| start | 左侧或顶部对齐 |  |
| end | 右侧或底部对齐 |  |
| center | 水平或垂直居中 |  |
| space-between | 两端对齐 |  |
| space-around | 享有独立不重复的空白空间 |  |
| space-evenly | 平均分配空白空间 |  |
作用在grid子项上
1.grid-column-start,grid-column-end,grid-row-start,grid-row-end
水平和垂直方向占据的始末位置.当终点属性使用span+数字时,表示的就不是线条,而是所占格数
初始状态:
<style>
#box {
width: 300px;
height: 300px;
border: black dotted;
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
}
#box div{background: red;border: black solid;
}
</style>
<body>
<div id="box">
<div>1</div>
</div>
</body>
按如图划分线条:
使用grid-column-start,grid-column-end,grid-row-start,grid-row-end划定区域:
/* 第二条竖线为起点 */
grid-column-start: 2;
/* 第三条竖线为终点 */
grid-column-end:3 ;
/* 第一天横线为起点 */
grid-row-start: 1;
/* 第三条横线为终点 */
/* grid-row-end:span 2也能实现同样效果 */
grid-row-end:3 ;
效果:
2.grid-column和grid-row
grid-column-start + grid-column-end的缩写和grid-row-start + grid-row-end的缩写。
写法:
/* 第二条竖线为起点 */
grid-column-start: 2;
/* 第三条竖线为终点 */
grid-column-end:3 ;
/* 第一天横线为起点 */
grid-row-start: 1;
/* 第三条横线为终点 */
/* grid-row-end:span 2也能实现同样效果 */
grid-row-end:3 ;
可以写成如下形式:
grid-column:2/3;
grid-row:1/span2;
3.grid-area
表示当前网格所占用的区域，名字和位置两种表示方法。
名字表示法:见上文
位置表示法:
grid-area: 3/2 / 4/ 4;
/*第一个值是水平的起始位置，第二个值是垂直的起始位置，三个值是水平的结束位置，第四个值是垂直的结束位置*/
4.justify-self,align-self和place-self
单个网格元素的水平对齐方式。单个网格元素的垂直对齐方式。align-self和ljustify-self的缩写。
4750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
