css3伸缩盒模型第二章(侧轴相关)
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>
