我是靠谱客的博主 懵懂银耳汤,这篇文章主要介绍css flex布局1、display:flex:2、flex-direction方向属性3、flex-wrap:"";4、justify-content 排版子容器属性,现在分享给大家,希望可以做个参考。
在父容器content写了第一个属性
1、display:flex:
代码和效果如图所示,默认横向布局
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> .content { display: flex; } .children { width: 100px; height: 100px; margin-right: 20px; background: rebeccapurple; } </style> </head> <body> <div class="content"> <div class="children"></div> <div class="children"></div> <div class="children"></div> </div> </body> </html>
给父容器增加第二个属性:
2、flex-direction方向属性
默认方向属性:
(1)row
(2)row-reverse
复制代码
1
2
3
4.content { display: flex; flex-direction: row-reverse; }
效果如图
注意上面的子容器的排序和右浮动很像。
(3)、column
复制代码
1
2
3
4.content { display: flex; flex-direction: column; }
效果如图
正排序
(4)、 column-reverse 反排序
复制代码
1
2
3
4.content { display: flex; flex-direction: column-reverse; }
复制代码
1(5)、inherit/unset/initial/revert 效果皆如图
3、flex-wrap:"";
(1)nowrap/inherit/revert/unset/inherit
不换行 里面的子容器会随父容器的大小改变
代码:
复制代码
1
2
3
4
5
6.content { display: flex; flex-direction: unset; flex-wrap: nowrap; width: 700px; }
代码定义为width:"100px",但是实际是
(2)wrap 换行 宽度不变
复制代码
1
(3)wrap-reverse 宽度不变 后面的会向上走
复制代码
1
2
3
4
5
6.content { display: flex; flex-direction: unset; flex-wrap: wrap-reverse; width: 700px; }
4、justify-content 排版
(1)center
(2)inherit/revert/unset/initial/end/flex-start/left/normal/right
(3)flex-end
(4)space-around
(5)space-between 平均分
(6)space-evenly
5、align-items 竖向对齐方式
子容器属性
1、flex-grow 剩余空间增加
复制代码
1
2
3.children:last-child{ flex-grow: 2; }
如图
复制代码
1(2)align-self: center; 是某个属性,脱离原来的布局
最后
以上就是懵懂银耳汤最近收集整理的关于css flex布局1、display:flex:2、flex-direction方向属性3、flex-wrap:"";4、justify-content 排版子容器属性的全部内容,更多相关css内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复