第三个属性 align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
<style> #fathera { height: 400px; width: 600px; border: 1px solid red; background-color: azure; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: row; /* 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 */ align-items: flex-start; } #fathera div { height: 60px; width: 60px; border: 1px solid black; } </style> <div id="fathera"> <!-- 我是father的盒子 --> <div>我是第几个1diva</div> <div>我是第几个2diva</div> <div>我是第几个3diva</div> <div>我是第几个4diva</div> <div>我是第几个5diva</div> <div>我是第几个6diva</div> </div>
<style> #fathera1 { height: 400px; width: 600px; border: 1px solid red; background-color: azure; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: row; /* 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 */ align-items: flex-end; } #fathera1 div { height: 60px; width: 60px; border: 1px solid black; } </style> <div id="fathera1"> <!-- 我是father的盒子 --> <div>我是第几个1diva1</div> <div>我是第几个2diva1</div> <div>我是第几个3diva1</div> <div>我是第几个4diva1</div> <div>我是第几个5diva1</div> <div>我是第几个6diva1</div> </div>
<style> #fathera3 { height: 400px; width: 600px; border: 1px solid red; background-color: azure; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: row; /* 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 */ align-items: flex-end; /* 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 */ align-items: center; } #fathera3 div { height: 60px; width: 60px; border: 1px solid black; } </style> <div id="fathera3"> <!-- 我是father的盒子 --> <div>我是第几个1diva1</div> <div>我是第几个2diva1</div> <div>我是第几个3diva1</div> <div>我是第几个4diva1</div> <div>我是第几个5diva1</div> <div>我是第几个6diva1</div> </div>
第四个属性 flex-wrap 属性
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
- nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse -反转 wrap 排列。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap-reverse -反转 wrap 排列。
<style> #fatherb { height: 400px; width: 600px; border: 1px solid red; background-color: lightblue; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: row; flex-direction: row-reverse; /* 换行 */ flex-wrap: nowrap; flex-wrap: wrap-reverse ; } #fatherb div { height: 60px; width: 60px; border: 1px solid green; /* flex-wrap: nowrap; */ } </style> <div id="fatherb"> <!-- 我是father的盒子 --> <div>wrap-reverse -反转 wrap 排列。</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> </div>
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
<style> #fatherb1 { height: 400px; width: 600px; border: 1px solid red; background-color: paleturquoise; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: column; /* 换行 */ flex-wrap: wrap; flex-wrap: wrap-reverse; } #fatherb1 div { height: 60px; width: 60px; border: 1px solid green; /* flex-wrap: nowrap; */ } </style> <div id="fatherb1"> <!-- 我是father的盒子 --> <div>开始</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <div>我是第几个1div</div> <div>结束</div> </div>
第五个属性 align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
标题
<style> .zero{ height: 400px; width: 800px; border: 1px solid red; background-color: lavenderblush; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ /* flex-direction: row; */ /* flex-direction: row-reverse; */ align-content: center; flex-wrap: wrap; align-content: flex-end; align-content: flex-start; } .a{ height: 400px; width: 800px; border: 3px solid red; background-color: royalblue; display: flex; align-content: flex-end; flex-wrap: wrap; background-image: url(img/1 (6).jpg); background-repeat: no-repeat; } .b{ height: 400px; width: 800px; border: 1px solid red; background-color: peru; display: flex; align-content: flex-start; flex-wrap: wrap; } .c{ height: 400px; width: 800px; border: 1px solid red; background-color: pink; display: flex; align-content: space-around; flex-wrap: wrap; } .d{ height: 400px; width: 800px; border: 1px solid red; background-color: green; display: flex; align-content: space-between; flex-wrap: wrap; } .e{ height: 400px; width: 800px; border: 1px solid red; background-color: lightblue; display: flex; align-content: center; flex-wrap: wrap; } #father div { height: 60px; width: 60px; border: 1px solid black; align-content: center; background-image: url(/img/1 (5).jpg); } </style> <div id="father" class="zero" > <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> </div>
