作用
- CSS3新增了一些布局功能，使用它们可以更灵活地设计网页版式。本节将重点介绍多列布局，使用多列布局可以让很长的文本内容像报纸一样多列显示。
概念
- 在CSS3中，使用columns属性定义多列布局
columns: column-width | column-count;- column-width：定义每列的宽度
- column-count：定义列数
常见属性
- column-gap：定义列与列间的间隙
- column-rule：定义列与列间的边框样式
- column-span：定义跨列显示
定义列宽
概念
- 在CSS3中，column-width属性可以定义单列显示的宽度
column-width: auto|length;- auto：浏览器将决定列的宽度
- length：指定列宽的长度
使用
- 创建一个简单的页面，并设置列宽度为200像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列宽</title>
<style>
div{
line-height: 32px;
column-width:200px;
}
</style>
</head>
<body>
<div>
<h3>四季</h3>
<p>四季，指一年中交替出现的四个季节，即春季、夏季、秋季和冬季，每季三个月。一年四季是因为地球在围绕太阳公转而形成的。由于黄赤交角的存在，造成太阳直射点在地球南北纬23°26′之间往返移动的周年变化，从而引起正午太阳高度的季节变化和昼夜长短的季节变化，造成了各地获得太阳能量多少的季节变化，于是形成四季的更替。</p>
<ul>
<li>春季</li>
<li>夏季</li>
<li>秋季</li>
<li>冬季</li>
</ul>
<h3>春季</h3>
<p>春季，四季之一。春，代表着温暖、生长。春季，阴阳之气开始转变，万物随阳气上升而萌牙生长，大地呈现春和景明之象。从节气意义上讲，春季的开始是在立春（2月2日至5日之间），春季的结束在立夏（5月5日至7日之间）。在欧美，春季从中国的春分开始，到夏至结束。在爱尔兰，2月~4月被定为春季。</p>
<h3>夏季</h3>
<p>夏季，是一年四季中第2个季节，从立夏起至立秋结束。气温高是夏季最显著的气候特征，但因地域、干湿环境的不同，会产生炎热干燥或者湿热多雨的不同气候。我国幅员辽阔，各地区夏季的气候并非一样。总体来说，我国东南部季风区夏季高温多雨，西南高海拔地区夏季凉爽降水少，西北地区夏季炎热干燥。</p>
<h3>秋季</h3>
<p>秋季，是“春夏秋冬”四季之一。在我国，传统上是以二十四节气的“立秋”作为秋季的起点。进入秋季，意味着降雨、湿度等趋于下降或减少，在自然界中万物开始从繁茂成长趋向萧索成熟。</p>
<h3>冬季</h3>
<p>冬季，四季之一，传统上是以二十四节气“立冬”作为冬季的开始。冬天季节，生气闭蓄，万物进入休养、收藏状态。冬，即“终也、万物收藏也”，立冬后万物开始闭藏。“四立”划分四季反映了气候、物候等多方面特征。现在划分四季常根据气温变化划分，采用的是近代学者张宝堃的“候平均气温”法，按候平均气温法划分的四季，日平均气温连续五天等于或低于10摄氏度算是进入冬季。</p>
</div>
</body>
</html>定义列数
概念
- 在CSS3中，使用column-count属性定义列数
-
column-count: number|auto; - number：定义列数，取值为大于0的整数
- auto：根据浏览器计算值自动设置
使用
- 在上一示例的基础上，定义页面列数为3列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列数</title>
<style>
div{
line-height: 32px;
column-count:3;
}
</style>
</head>
<body>
<div>
<h3>四季</h3>
<p>四季，指一年中交替出现的四个季节，即春季、夏季、秋季和冬季，每季三个月。一年四季是因为地球在围绕太阳公转而形成的。由于黄赤交角的存在，造成太阳直射点在地球南北纬23°26′之间往返移动的周年变化，从而引起正午太阳高度的季节变化和昼夜长短的季节变化，造成了各地获得太阳能量多少的季节变化，于是形成四季的更替。</p>
<ul>
<li>春季</li>
<li>夏季</li>
<li>秋季</li>
<li>冬季</li>
</ul>
<h3>春季</h3>
<p>春季，四季之一。春，代表着温暖、生长。春季，阴阳之气开始转变，万物随阳气上升而萌牙生长，大地呈现春和景明之象。从节气意义上讲，春季的开始是在立春（2月2日至5日之间），春季的结束在立夏（5月5日至7日之间）。在欧美，春季从中国的春分开始，到夏至结束。在爱尔兰，2月~4月被定为春季。</p>
<h3>夏季</h3>
<p>夏季，是一年四季中第2个季节，从立夏起至立秋结束。气温高是夏季最显著的气候特征，但因地域、干湿环境的不同，会产生炎热干燥或者湿热多雨的不同气候。我国幅员辽阔，各地区夏季的气候并非一样。总体来说，我国东南部季风区夏季高温多雨，西南高海拔地区夏季凉爽降水少，西北地区夏季炎热干燥。</p>
<h3>秋季</h3>
<p>秋季，是“春夏秋冬”四季之一。在我国，传统上是以二十四节气的“立秋”作为秋季的起点。进入秋季，意味着降雨、湿度等趋于下降或减少，在自然界中万物开始从繁茂成长趋向萧索成熟。</p>
<h3>冬季</h3>
<p>冬季，四季之一，传统上是以二十四节气“立冬”作为冬季的开始。冬天季节，生气闭蓄，万物进入休养、收藏状态。冬，即“终也、万物收藏也”，立冬后万物开始闭藏。“四立”划分四季反映了气候、物候等多方面特征。现在划分四季常根据气温变化划分，采用的是近代学者张宝堃的“候平均气温”法，按候平均气温法划分的四季，日平均气温连续五天等于或低于10摄氏度算是进入冬季。</p>
</div>
</body>
</html> 
定义列间距
概念
- 在CSS3中，使用column-gap属性定义列与列间的间隙
column-gap: length|normal;- length：一个指定的长度，将设置列之间的差距
- normal：根据浏览器默认设置进行解析，一般为1em
使用
- 在上一示例的基础上，定义列与列间的间隙为80像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列间距</title>
<style>
div{
line-height: 32px;
column-count:3;
column-gap:80px;
}
</style>
</head>
<body>
<div>
<h3>四季</h3>
<p>四季，指一年中交替出现的四个季节，即春季、夏季、秋季和冬季，每季三个月。一年四季是因为地球在围绕太阳公转而形成的。由于黄赤交角的存在，造成太阳直射点在地球南北纬23°26′之间往返移动的周年变化，从而引起正午太阳高度的季节变化和昼夜长短的季节变化，造成了各地获得太阳能量多少的季节变化，于是形成四季的更替。</p>
<ul>
<li>春季</li>
<li>夏季</li>
<li>秋季</li>
<li>冬季</li>
</ul>
<h3>春季</h3>
<p>春季，四季之一。春，代表着温暖、生长。春季，阴阳之气开始转变，万物随阳气上升而萌牙生长，大地呈现春和景明之象。从节气意义上讲，春季的开始是在立春（2月2日至5日之间），春季的结束在立夏（5月5日至7日之间）。在欧美，春季从中国的春分开始，到夏至结束。在爱尔兰，2月~4月被定为春季。</p>
<h3>夏季</h3>
<p>夏季，是一年四季中第2个季节，从立夏起至立秋结束。气温高是夏季最显著的气候特征，但因地域、干湿环境的不同，会产生炎热干燥或者湿热多雨的不同气候。我国幅员辽阔，各地区夏季的气候并非一样。总体来说，我国东南部季风区夏季高温多雨，西南高海拔地区夏季凉爽降水少，西北地区夏季炎热干燥。</p>
<h3>秋季</h3>
<p>秋季，是“春夏秋冬”四季之一。在我国，传统上是以二十四节气的“立秋”作为秋季的起点。进入秋季，意味着降雨、湿度等趋于下降或减少，在自然界中万物开始从繁茂成长趋向萧索成熟。</p>
<h3>冬季</h3>
<p>冬季，四季之一，传统上是以二十四节气“立冬”作为冬季的开始。冬天季节，生气闭蓄，万物进入休养、收藏状态。冬，即“终也、万物收藏也”，立冬后万物开始闭藏。“四立”划分四季反映了气候、物候等多方面特征。现在划分四季常根据气温变化划分，采用的是近代学者张宝堃的“候平均气温”法，按候平均气温法划分的四季，日平均气温连续五天等于或低于10摄氏度算是进入冬季。</p>
</div>
</body>
</html>
定义列边框
- 在CSS3中，使用column-rule 属性定义列与列间的边框样式
column-rule: column-rule-width column-rule-style column-rule-color;- column-rule-width：设置列中之间的宽度
- column-rule-style：设置列中之间的样式
- column-rule-color：设置列中之间的颜色
使用
- 在上一示例的基础上，定义列与列间的边框样式为2像素颜色为灰色的虚线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列边框</title>
<style>
div{
line-height: 32px;
column-count:3;
column-gap:80px;
column-rule:2px dashed gray;
}
</style>
</head>
<body>
<div>
<h3>四季</h3>
<p>四季，指一年中交替出现的四个季节，即春季、夏季、秋季和冬季，每季三个月。一年四季是因为地球在围绕太阳公转而形成的。由于黄赤交角的存在，造成太阳直射点在地球南北纬23°26′之间往返移动的周年变化，从而引起正午太阳高度的季节变化和昼夜长短的季节变化，造成了各地获得太阳能量多少的季节变化，于是形成四季的更替。</p>
<ul>
<li>春季</li>
<li>夏季</li>
<li>秋季</li>
<li>冬季</li>
</ul>
<h3>春季</h3>
<p>春季，四季之一。春，代表着温暖、生长。春季，阴阳之气开始转变，万物随阳气上升而萌牙生长，大地呈现春和景明之象。从节气意义上讲，春季的开始是在立春（2月2日至5日之间），春季的结束在立夏（5月5日至7日之间）。在欧美，春季从中国的春分开始，到夏至结束。在爱尔兰，2月~4月被定为春季。</p>
<h3>夏季</h3>
<p>夏季，是一年四季中第2个季节，从立夏起至立秋结束。气温高是夏季最显著的气候特征，但因地域、干湿环境的不同，会产生炎热干燥或者湿热多雨的不同气候。我国幅员辽阔，各地区夏季的气候并非一样。总体来说，我国东南部季风区夏季高温多雨，西南高海拔地区夏季凉爽降水少，西北地区夏季炎热干燥。</p>
<h3>秋季</h3>
<p>秋季，是“春夏秋冬”四季之一。在我国，传统上是以二十四节气的“立秋”作为秋季的起点。进入秋季，意味着降雨、湿度等趋于下降或减少，在自然界中万物开始从繁茂成长趋向萧索成熟。</p>
<h3>冬季</h3>
<p>冬季，四季之一，传统上是以二十四节气“立冬”作为冬季的开始。冬天季节，生气闭蓄，万物进入休养、收藏状态。冬，即“终也、万物收藏也”，立冬后万物开始闭藏。“四立”划分四季反映了气候、物候等多方面特征。现在划分四季常根据气温变化划分，采用的是近代学者张宝堃的“候平均气温”法，按候平均气温法划分的四季，日平均气温连续五天等于或低于10摄氏度算是进入冬季。</p>
</div>
</body>
</html>
跨列显示
概念
- 在CSS3中，使用column-span属性定义跨列显示，也可以设置单列显示
column-span: 1|all;1：元素应跨越一列
all：元素应该跨越所有列<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义跨列显示</title>
<style>
div{
line-height: 32px;
column-count:3;
column-gap:80px;
column-rule:2px dashed gray;
}
h3:nth-child(1){
text-align: center;
column-span:all;
}
</style>
</head>
<body>
<div>
<h3>四季</h3>
<p>四季，指一年中交替出现的四个季节，即春季、夏季、秋季和冬季，每季三个月。一年四季是因为地球在围绕太阳公转而形成的。由于黄赤交角的存在，造成太阳直射点在地球南北纬23°26′之间往返移动的周年变化，从而引起正午太阳高度的季节变化和昼夜长短的季节变化，造成了各地获得太阳能量多少的季节变化，于是形成四季的更替。</p>
<ul>
<li>春季</li>
<li>夏季</li>
<li>秋季</li>
<li>冬季</li>
</ul>
<h3>春季</h3>
<p>春季，四季之一。春，代表着温暖、生长。春季，阴阳之气开始转变，万物随阳气上升而萌牙生长，大地呈现春和景明之象。从节气意义上讲，春季的开始是在立春（2月2日至5日之间），春季的结束在立夏（5月5日至7日之间）。在欧美，春季从中国的春分开始，到夏至结束。在爱尔兰，2月~4月被定为春季。</p>
<h3>夏季</h3>
<p>夏季，是一年四季中第2个季节，从立夏起至立秋结束。气温高是夏季最显著的气候特征，但因地域、干湿环境的不同，会产生炎热干燥或者湿热多雨的不同气候。我国幅员辽阔，各地区夏季的气候并非一样。总体来说，我国东南部季风区夏季高温多雨，西南高海拔地区夏季凉爽降水少，西北地区夏季炎热干燥。</p>
<h3>秋季</h3>
<p>秋季，是“春夏秋冬”四季之一。在我国，传统上是以二十四节气的“立秋”作为秋季的起点。进入秋季，意味着降雨、湿度等趋于下降或减少，在自然界中万物开始从繁茂成长趋向萧索成熟。</p>
<h3>冬季</h3>
<p>冬季，四季之一，传统上是以二十四节气“立冬”作为冬季的开始。冬天季节，生气闭蓄，万物进入休养、收藏状态。冬，即“终也、万物收藏也”，立冬后万物开始闭藏。“四立”划分四季反映了气候、物候等多方面特征。现在划分四季常根据气温变化划分，采用的是近代学者张宝堃的“候平均气温”法，按候平均气温法划分的四季，日平均气温连续五天等于或低于10摄氏度算是进入冬季。</p>
</div>
</body>
</html>
弹性布局
出现的原因
- 网页布局没有进入CSS的时代时，排版几乎是通过 table 元素实现的。后来CSS标准提供了3种布局方式：标准文档流、浮动布局和定位布局
- 比如实现水平居中可以使用如下代码
margin: 0 auto;- 实现水平垂直居中，需要基于盒子模型，同时依赖 display 属性或 position属性或 float属性，比如：
.dad {
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}定义
- 弹性布局是 Flexible Box 的缩写，也可以简称为“Flex布局”。其是CSS3的一种新的布局模式，它可以在页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
作用
- 能够更加高效方便的控制元素的对齐、排列
- 可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的
- 控制元素在页面的布局方向
- 按照不同于DOM所指定排序方式对屏幕上的元素重新排序
应用场景
- 以苏宁易购移动页面为例，在网页中当遇到需要将父元素按照奇数进行等分，比如苏宁易购中红色区域是将父元素3等分，就可以应用弹性布局
语法
- 弹性布局由弹性容器（Flex container，简称“容器”）和弹性项目（Flex item，简称项目）组成。使用时，通过为弹性容器设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，具体语法如下
- 块级元素使用如下代码
-
display : flex; - 行内元素使用如下代码
-
display : inline-flex;使用
- 设置一个div大盒子表示容器，设置三个div小盒子表示项目，并使用弹性布局展示项目在一行内从左到右显示
容器属性
分类
弹性布局由容器和项目组成。在CSS3中，常用的容器属性如下：
- flex-direction：指定项目的排列方向
- flex-wrap：用于指定项目的换行方式
- flex-flow：复合属性，是flex-direction和flex-wrap属性的简写形式
- justify-content：设置项目在主轴（横轴）方向上的对齐方式
- align-items：设置项目在侧轴（纵轴）方向上的对齐方式
- align-content：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-direction
- 用于指定项目在父容器中的排列方向
-
flex-direction: row | row-reverse | column | column-reverse; - 当属性值为“row”时，是默认值，项目将水平显示，起点在左端
- 当属性值为“row-reverse”时，项目将水平显示，起点在右端
- 当属性值为“column”时，项目将垂直显示，起点在上沿
- 当属性值为“column-reverse”时，项目将垂直显示，起点在下沿
flex-direction
- 根据flex-direction属性的语法，给容器定义排列方向为起点在右端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-direction</title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: #ccc;
/*主轴为水平方向，起点在右端*/
flex-direction: row-reverse;
}
.flex-item {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html> 
flex-wrap
- 用于指定项目的换行方式
flex-wrap: nowrap | wrap | wrap-reverse;当属性值为“nowrap”时，是默认值，表示不换行
当属性值为“wrap”时，表示换行，第一行在上方
- 当属性值为“wrap-reverse”时，表示换行，第一行在下方
- 根据flex-wrap属性的语法，定义项目换行，第一行在上方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.flex-container {
display: flex;
width: 300px;
height: 250px;
background-color: #ccc;
flex-wrap: wrap;
}
.flex-item {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
flex-flow
- 是复合属性，其是flex-direction和flex-wrap属性的简写形式
flex-flow: flex-direction| flex-wrap- 取flex-direction和flex-wrap属性的值即可
注意
- 编码时要符合团队习惯，不能因为简便，而去损失了代码的可读性
justify-content
- 用于设置项目在主轴（横轴）方向上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;- 当属性值为“flex-start”时，是默认值，表示左对齐
- 当属性值为“flex-end”时，表示右对齐
- 当属性值为“center”时，表示居中对齐
- 当属性值为“space-between”时，表示两端对齐，项目之间的间隔都相等
- 当属性值为“space-around”时，表示每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
justify-content
- 根据justify-content属性的语法，定义项目在主轴方向上居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>justify-content</title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: #ccc;
justify-content:center;
}
.flex-item {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html> 
align-items
- 用于设置项目在侧轴（纵轴）方向上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;- 当属性值为“flex-start”时，表示元素位于容器的开头
- 当属性值为“flex-end”时，表示元素位于容器的结尾
- 当属性值为“center”时，表示元素位于容器的中心
- 当属性值为“baseline”时，表示元素位于容器的基线上
- 当属性值为“stretch”时，是默认值，表示元素被拉伸以适应容器
- 根据align-items属性的语法，在上一示例的基础上再定义项目在侧轴方向上元素位于容器的中心，使项目水平垂直居中显示在容器中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-items</title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: #ccc;
justify-content:center;
align-items:center;
}
.flex-item {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
align-content
- 用于修改 flex-wrap 属性的行为，类似align-items，但不是设置子元素对齐，而是设置行对齐
align-content: flex-start | flex-end | center | space-between | space-around | stretch;- 当属性值为“flex-start”时，表示与交叉轴的起点对齐
- 当属性值为“flex-end”时，表示与交叉轴的终点对齐
- 当属性值为“center”时，与交叉轴的中心对齐
- 当属性值为“space-between”时，表示与交叉轴两端对齐，轴线之间的间隔平均分布
- 当属性值为“space-around”时，表示每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
- 当属性值为“stretch”时，是默认值，表示轴线占满
- 根据align-content属性的语法，设置项目与交叉轴两端对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-content</title>
<style>
.flex-container {
display: flex;
width: 300px;
height: 250px;
background-color: #ccc;
/*只有设置了换行，align-content属性才会起作用*/
flex-wrap: wrap;
align-content:space-between;
}
.flex-item {
background-color: red;
width: 100px;
height: 60px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
项目属性
分类
- 弹性布局由容器和项目组成。在CSS3中，常用的项目属性如下
- order：定义项目的排列顺序
- flex-grow：定义项目的放大比例
- flex-shrink：定义项目的缩小比例
- flex-basis：定义在分配多余空间之前，项目占据的主轴空间
- flex：是复合属性，代表flex-grow, flex-shrink 和 flex-basis的简写
- align-self：定义交叉轴上的对齐方式
order
- 用于定义项目的排列顺序。其数值越小，排列越靠前，默认为0
- 使用order属性改变三个项目的排列顺序
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>order</title> <style> .flex-container { width: 400px; height: 250px; background-color: #ccc; display: flex; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 10px; } #item1{ order:5; } #item2{ order:10; } #item3{ order:-1; } </style> </head> <body> <div class="flex-container"> <div class="flex-item" id="item1">flex item 1</div> <div class="flex-item" id="item2">flex item 2</div> <div class="flex-item" id="item3">flex item 3</div> </div> </body> </html>
flex-grow
- 用于定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- 在上个示例的基础上，定义项目等分剩余空间
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex-grow</title> <style> .flex-container { width: 400px; height: 250px; background-color: #ccc; display: flex; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 10px; flex-grow:1; } #item1{ order:5; } #item2{ order:10; } #item3{ order:-1; } </style> </head> <body> <div class="flex-container"> <div class="flex-item" id="item1">flex item 1</div> <div class="flex-item" id="item2">flex item 2</div> <div class="flex-item" id="item3">flex item 3</div> </div> </body> </html>
flex-shrink
- 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- 修改容器的宽度为300像素并使用flex-shrink属性定义“flex item 1”项目不缩小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-shrink</title>
<style>
.flex-container {
width: 300px;
height: 250px;
background-color: #ccc;
display: flex;
}
.flex-item {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
#item1{
flex-shrink:0;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item" id="item1">flex item 1</div>
<div class="flex-item" id="item2">flex item 2</div>
<div class="flex-item" id="item3">flex item 3</div>
</div>
</body>
</html>
flex-basis
- 定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
- 设置“flex item 1”的flex-basis属性为150像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-basis</title>
<style>
.flex-container {
width: 400px;
height: 250px;
background-color: #ccc;
display: flex;
}
.flex-item {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
#item1{
flex-basis:150px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item" id="item1">flex item 1</div>
<div class="flex-item" id="item2">flex item 2</div>
<div class="flex-item" id="item3">flex item 3</div>
</div>
</body>
</html> 
flex
- 是一个复合属性，代表flex-grow、flex-shrink 和 flex-basis的简写，后两个属性可选，默认值为0 1 auto
- flex属性有两个快捷值，分别是
- auto，代表 （1 1 auto）
- none，代表（0 0 auto）
align-self
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
align-self: auto | flex-start | flex-end | center | baseline | stretch;- 在上述语法中，除了auto，其他都与align-items属性完全一致
- 设置“flex item 2”的对齐方式为位于容器的结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-self</title>
<style>
.flex-container {
width: 400px;
height: 250px;
background-color: #ccc;
display: flex;
}
.flex-item {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
#item2{
align-self:flex-end;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item" id="item1">flex item 1</div>
<div class="flex-item" id="item2">flex item 2</div>
<div class="flex-item" id="item3">flex item 3</div>
</div>
</body>
</html>
扫一扫
3483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
