本篇内容主要讲解“css3有哪些布局属性”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3有哪些布局属性”吧! css3布局属性
本篇内容主要讲解“css3有哪些布局属性”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3有哪些布局属性”吧!
css3布局属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、order、flex-grow、flex-shrink等等。
本教程操作环境：windows7系统、CSS3版、Dell G3电脑。
1、弹性盒模型（Flexible Box 或Flexbox）
弹性盒模型最大的特征在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。
（1）弹性容器属性
flex-direction：设置主轴方向，确定弹性子元素排列方式
flex-wrap：当弹性子元素超出弹性容器范围时是否换行
flex-flow：flex-direction和flex-wrap属性的快捷方式，复合属性
justify-content：主轴上的对齐方式
align-items：侧轴上的对齐方式
align-content：侧轴上有空白时，侧轴的对齐方式
（2）弹性子元素属性
order：控制弹性容器里子元素的顺序
flex-grow：设置弹性子元素的扩展比率
flex-shrink：设置弹性子元素的收缩比率、
flex-basis：指定弹性子元素伸缩前的默认大小值，相当于width和height属性
flex：flex-grow,flex-shrink和flex-basis属性的复合属性
align-self：允许独立的弹性子元素覆盖弹性容器的默认对齐设置
Flexbox菜单项目实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
响应式菜单html架构，emmet的方式进行简写
ul.menu>li*6>a[href="#"]{HTML}
-->
<ul class="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">MonGo</a></li>
</ul>
</body>
</html>.menu{
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
}
.menu li{
height: 40px;
text-align: center;
line-height: 40px;
flex: 1 1 100%;
}
.menu li:nth-child(1){
background-color: #39ADD1;
}
.menu li:nth-child(2){
background-color: #3079AB;
}
.menu li:nth-child(3){
background-color: #982551;
}
.menu li:nth-child(4){
background-color: #E15258;
}
.menu li:nth-child(5){
background-color: #CC6699;
}
.menu li:nth-child(6){
background-color: #52AC43;
}
@media (min-width:480px) {
.menu li{
flex: 1 1 50%;
}
}
@media (min-width:768px) {
.menu{
flex-flow: row nowrap;
}
}2、多列详解
columns：复合属性（column-width和column-count),设置宽度和列数；
column-width:设置每列的宽度
column-count：设置列数
column-gap：设置列之间的间隙
column-rule：复合属性（column-rule-width、column-rule-style、column-rule-color），设置列之间的边框样式
column-fill：设置列的高度是否统一
column-span：设置是否横跨所有列
最佳实践方式：
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}到此，相信大家对“css3有哪些布局属性”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
--结束END--
本文标题: css3有哪些布局属性
本文链接: https://www.lsjlt.com/news/89641.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0