css3伸缩盒模型第二章(侧轴相关)
侧轴对齐方式
侧轴对齐我们需要分两种情况，一种是多行，一种是单行，两种设置方式不同
- 属性：align-items 单行
- 属性： align-content 多行
单行 align-items
- flex-start: 侧轴的起点对齐
- flex-end ：侧轴的终点对齐。
- center ：侧轴的中点对齐。
- baseline : 伸缩项目的第一行文字的基线对齐。
- stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）
基本代码
<title>06.侧重对齐方式</title>
<style>
.outer {
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 开启弹性盒子 */
display: flex;
/* 主轴方向默认 */
flex-direction: row;
/* 默认不换行 */
flex-wrap: nowrap;
/* 侧轴方向 */
/* 第一种方式 从上到下 */
align-items: flex-start;
/* 第二种方式 从下到上 */
/* align-items: flex-end; */
/* 第三种方式 居中 */
/* align-items: center; */
/* 第四种方式 基线对齐 */
/* align-items: baseline; */
/* 第五种方式 自动拉伸填满 需要将元素高度都设置为0 */
/* align-items: stretch; */
}
.inner {
width: 200px;
height: 200px;
background-color: chocolate;
border: 1px solid black;
box-sizing: border-box;
}
.inner2 {
height: 300px;
}
.inner3 {
height: 100px;
}
.inner_stre {
width: 200px;
background-color: paleturquoise;
border: 1px solid black;
}
.inner-baseline {
font-size: 80px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
<!-- 基线对齐 font-size: 80px; -->
<!-- <div class="outer">
<div class="inner">1X</div>
<div class="inner inner2 inner-baseline">2X</div>
<div class="inner inner3">3X</div>
</div> -->
<!-- 拉伸 默认方式-->
<!-- <div class="outer">
<div class="inner_stre">1</div>
<div class="inner_stre">2</div>
<div class="inner_stre">3</div>
</div> -->
</body>
flex-start
侧轴的起点对齐，也就是从上到下
align-items: flex-start;
flex-end
从侧轴的重点方向，从下到上
/* 第二种方式 从下到上 */
align-items: flex-end;
center
项目居中对齐；
/* 第三种方式 居中 */
align-items: center;
baseline
基线对齐，我们需要将项目里面的内容设置一个X的字母，然后将字母调整大一些，这个时候观察，就是以基线对齐了；
代码
.inner-baseline { font-size: 80px; } <!-- 基线对齐 font-size: 80px; --> <div class="outer"> <div class="inner">1X</div> <div class="inner inner2 inner-baseline">2X</div> <div class="inner inner3">3X</div> </div>/* 第四种方式 基线对齐 */
align-items: baseline;
stretch
自动拉伸，也就是说当我们没有设置高度的时候，项目会自动拉伸整个高度，直至完全填充整个父容器的高度
- 代码
<div class="outer">
<div class="inner_stre">1</div>
<div class="inner_stre">2</div>
<div class="inner_stre">3</div>
</div>
/* 第五种方式 自动拉伸填满 需要将元素高度都设置为0 */
align-items: stretch;
多行 align-content
我们设置整个容器的高度加到900px，将内容撑开，保证有三行效果，且第一行每个元素高度不同
- 属性：align-content
- 属性值：
- flex-start ：与侧轴的起点对齐。
- flex-end ：与侧轴的终点对齐。
- center ：与侧轴的中点对齐。
- space-between ：与侧轴两端对齐，中间平均分布。
- space-around ：伸缩项目间的距离相等，比距边缘大一倍。
- space-evenly : 在侧轴上完全平分。
- stretch ：占满整个侧轴。—— 默认值
基本代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06.侧重对齐方式</title>
<style>
.outer {
width: 1000px;
height: 900px;
background-color: #888;
margin: 0 auto;
/* 开启弹性盒子 */
display: flex;
/* 主轴方向默认 */
flex-direction: row;
/* 换行 */
flex-wrap: wrap;
/* 多行对齐方式 */
/* 方式1 全都挨到一起了，不留空隙，节约主义 */
/* align-content: flex-start; */
/* 方式2 将上面留着往下挤 */
/* align-content: flex-end; */
/* 方式3 居中 两边留相同的间隙 */
/* align-content: center; */
/* 方式4 项目间距离是两侧距离的2倍*/
/* align-content: space-around; */
/* 方式4 两侧不留间隙，项目间间隙相等*/
align-content: space-between;
/* 方式5 间隙均分 */
/* align-content: space-evenly; */
/* 方式5 拉伸,全部填充 需要将高度都去掉 */
/* align-content: stretch; */
}
.inner {
width: 200px;
height: 200px;
background-color: plum;
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
text-align: center;
line-height: 200px;
}
.inner2 {
height: 300px;
}
.inner1 {
height: 100px;
}
.inner_stretch {
width: 200px;
background-color: pink;
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
</div>
<!-- stretch-->
<!-- <div class="outer">
<div class="inner_stretch">1</div>
<div class="inner_stretch">2</div>
<div class="inner_stretch">3</div>
<div class="inner_stretch">4</div>
<div class="inner_stretch">5</div>
<div class="inner_stretch">6</div>
<div class="inner_stretch">7</div>
<div class="inner_stretch">8</div>
<div class="inner_stretch">9</div>
<div class="inner_stretch">10</div>
<div class="inner_stretch">11</div>
</div> -->
</body>
默认效果，设置换行
flex-start
/* 方式1 全都挨到一起了，不留空隙，节约主义 */
align-content: flex-start;
flex-end
/* 方式2 将上面留着往下挤 */
align-content: flex-end;
center
居中对齐，两边留缝隙
/* 方式3 居中 两边留相同的间隙 */
align-content: center;
space-around
项目间距离是两侧距离的2倍,项目与项目间的距离相等
/* 方式4 项目间距离是两侧距离的2倍*/
align-content: space-around;
space-between
两侧不留间隙，项目间间隙相等
/* 方式4 两侧不留间隙，项目间间隙相等*/
align-content: space-between;
space-evenly
间隙均分,所有剩余的空间按照相同的比例均分
/* 方式5 间隙均分 */
align-content: space-evenly;
stretch
拉伸(默认值),全部填充 ， 需要将高度都去掉
/* 方式5 拉伸,全部填充 需要将高度都去掉 */
align-content: stretch;
代码
<div class="outer"> <div class="inner_stretch">1</div> <div class="inner_stretch">2</div> <div class="inner_stretch">3</div> <div class="inner_stretch">4</div> <div class="inner_stretch">5</div> <div class="inner_stretch">6</div> <div class="inner_stretch">7</div> <div class="inner_stretch">8</div> <div class="inner_stretch">9</div> <div class="inner_stretch">10</div> <div class="inner_stretch">11</div> </div>
