CSS3 Flex布局(容器)
2024-08-28 10:12:21
一、flex-direction属性
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
<style>
.box{
background: #0074D9;
display: flex;
flex-direction: row-reverse;
}
.box>div[class^="item"]{
color: #FFFFFF;
}
</style> <div class="box">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
</div>
二、flex-wrap属性
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
三、flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
四、justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
五、align-items属性
align-items属性定义项目在交叉轴上如何对齐。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
垂直居中
<style>
.box{
background: #0074D9;
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
}
.box>div[class^="item"]{
color: #FFFFFF;
}
</style> <div class="box">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
</div>
六、align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
最新文章
- 漫谈C++:良好的编程习惯与编程要点
- RDLC An unexpected error occurred while compiling expressions. Native compiler return value: &#39;-1073741511&#39;
- 【Java/Android性能优3】Android性能调优工具TraceView使用介绍
- Mac OS X 启用 Web 服务器
- 常用的四种CSS样式表格
- angular的post提交
- 浅谈intval()函数用法
- 为什么要配置path环境变量?
- Prototypes analyze(二叉排序树,不同树形个数)
- PHP框架学习之Laravel安装
- Managing Data in Containers
- svg图片转换为WEB字体图标
- HTML学习笔记2
- 【NFS】nfs安装调优
- object.observe被废弃了怎么办
- java----JDOM解析XML
- 繁简字转换(C#)
- mysql数据库查询库中所有表所占空间大小
- jQuery的addClass,removeClass和toggleClass方法
- extern函数声明(转)
热门文章
- iBatis in或not in 查询
- 安装SDK后打开安卓project后有例如以下错误:发现了以元素 &;#39;d:skin&;#39; 开头的无效内容。此处不应含有子元素。
- Redis(四):常用数据类型和命令
- atitit.MIZIAN 陕北方言 特有词汇 大词典 attilax 整理 a--g v1 q31.xlsx
- JAVA 双重检查锁定和延迟初始化
- ltp的使用
- bitset在acm中的应用
- Android ADB工具-操作手机和获取手设备信息(四)
- php生成rss订阅
- SharePoint2013导入Excel到列表