多列布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样
1.常用属性：
a)column-count: 属性设置列的具体个数
b)column-width: 属性控制列的宽度
c)column-gap: 两列之间的缝隙间隔
d)column-rule: 规定列之间的宽度、样式和颜色
e)column-span: 规定元素应横跨多少列(n:指定跨n列 all:跨所有列)
2.多列的用法：
<style>
*{
padding: 0;
margin: 0;
}
.wrapper{
width:1054px;
padding:20px;
margin:0 auto;
font-family: "微软雅黑",Arial;
/*设置以几列的方式显示*/
column-count:2;
/*指定列宽*/
column-width:500px;
/*指定列与列之间的间距*/
column-gap: 50px;
/*指定列与列之间间隙的样式*/
/*column-rule:2px dotted red*/
/*相对应下面的三个属性*/
column-rule-color:red;
column-rule-style:dotted;
column-rule-width:2px;
}
.wrapper > h4{
column-span: all;
}
</style>
3.列高度的平衡：
如果设定列的最大高度，这个时候，文本内容会从第一列开始填充，然后第二列，第三列
max-height: 300px;
伸缩布局:
布局的传统解决方案，基于<u>盒状模型</u>，依赖 <u>display</u>属性 + <u>position</u>属性 + <u>float</u>属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
- 重要属性
a)display:flex:如果一个容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)
b)justify-content:设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式,语法：justify-content：flex-start | flex-end | center | space-between | space-around
flex-start:让子元素从父容器的起始位置开始排列
flex-end:让子元素从父容器的结束位置开始排列
center:让子元素从父容器的中间位置开始排列
space-between:左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
space-around:将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍.
c)flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值：flex-direction：定义弹性盒子元素的排列方向。flex-wrap：控制flex容器是单行或者多行。
flex-flow:是flex-wrap和flex-direction的综合:
flex-wrap:控制子元素是否换行显示，默认不换行
nowrap:不换行--则收缩
wrap:换行
wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列
flex-wrap: wrap;
flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)
row:水平排列方向，从左到右
row-reverse:水平排列方向，从右到左
column:垂直排列方向，从上到下
column-reverse：垂直排列方向，从下到上
flex-direction: column-reverse;
综合写法：
flex-flow: row wrap;
flex属性：
d)flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
- flex-grow：
flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值
比例值计算 ：当前空间的flex-grow/所有兄弟元素的flex-grow的和
flex-grow的默认是0:说明子元素并不会去占据剩余的空间
- flex-shrink：
flex-shrink:定义收缩比例，通过设置的值来计算收缩空间
比例值计算 ：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
默认值为1
伸缩布局的常用属性flex：
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 500px;
background-color: #ccc;
margin:0 auto;
/*设置父容器的为伸缩盒子*/
display: flex;
/*设置子元素在主轴方向上的排列方式*/
/*justify-content: flex-start;*/
}
.left{
/*flex是用来设置当前伸缩子项占据剩余空间的比例值*/
flex: 1;
height: 500px;
background-color: red;
}
.right{
flex: 3;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
image.png
demo:菜单栏自动伸缩：
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin:100px auto;
}
div > ul{
list-style: none;
width: 100%;
/*将父容器设置了伸缩盒子，子元素默认成为伸缩项 float margin*/
display: flex;
}
div > ul > li{
/*宽度
1.我们并不知道li的具体的数量
2.也不直接设置%*/
height: 36px;
line-height: 36px;
text-align: center;
background-color: #9fff9d;
border-right: 1px solid #ccc;
flex: 1;
}
</style>
</head>
<body>
<div>
<ul>
<li>首页</li>
<li>商品分类</li>
<li>我的订单</li>
<li>最新商品</li>
<li>联系我们</li>
</ul>
</div>
image.png
align-items:
align-items:设置子元素(伸缩项)在侧轴方向上的对齐方式
flex-start:设置在侧轴方向上顶对齐
flex:end:设置在侧轴方向上底对齐
stretch:拉伸：让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向>> 默认值
baseline:文本基线
宽高自适应demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.layout{
width: 500px;
height: 600px;
background-color: #CCCCCC;
margin:10px auto;
/*设置父容器为伸缩盒子*/
display: flex;
/*默认的主轴是row,这里需要以列的方式进行排列*/
flex-direction: column;
}
header{
width: 100%;
height: 60px;
background-color: red;
}
main{
width: 100%;
background-color: green;
/*让当前伸缩项占据父容器的剩余空间*/
flex: 1;
/*让main成为伸缩盒子*/
display: flex;
}
main > article{
height: 100%;
flex: 1;
background-color: pink;
}
main > aside{
height: 100%;
flex: 3;
background-color: darkblue;
}
footer{
width: 100%;
height: 80px;
background-color: purple;
}
</style>
</head>
<body>
<div class="layout">
<header></header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
</div>
</body>
</html>
image.png
网友评论