盒子三)"/>

flex布局(弹性盒子三)

在之前的文章里说到了弹性盒子的部分属性，接下来接着说弹性盒子的其余属性

目录

弹性盒子的属性及其属性值

1.order 顺序指定：用css指定顺序，不用html排序

2.flex-grow 子项目延伸比率

3.flex-shrink 子项目的收缩比率 和flex-grow正好相反

4.flex-basis 子项目的基本宽度

5.flex  flex-grow、flex-shrink和flex-basis一起指定

6.align-self  子元素垂直对齐  这是给单个的子元素盒子设置样式

弹性盒子的属性及其属性值

1.order 顺序指定：用css指定顺序，不用html排序

 设置内容区的样式：.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;order: 3;}
内容区：<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>

如图所示：html里给数字1盒子 排序在最前面第一位，但是css里给数字1盒子排序在最后面一位，最后数字1盒子排在了最后面一位，说明css也可以给子元素盒子进行排序

2.flex-grow 子项目延伸比率

 设置内容区的样式：.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;flex-grow: 1;}
内容区：<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>

如图所示：有一个元素设置延伸宽度至挤满父元素的宽度，两个元素设置就是共同平分共同延伸至挤满父元素的宽度

3.flex-shrink 子项目的收缩比率 和flex-grow正好相反

例：.item1{flex-shrink：0；}

4.flex-basis 子项目的基本宽度

例：.item1{flex-basis：200px；}

5.flex  flex-grow、flex-shrink和flex-basis一起指定

例：.item1{flex：0 1 30%；}

6.align-self  子元素垂直对齐  这是给单个的子元素盒子设置样式

a  auto 默认值

意思是指定的子元素盒子还是停留在当前位置，没有变化

b  flex-shart  靠上  

意思是指定的子元素盒子靠上，因为子元素盒子原始位置就是靠上，所以也相当于是默认值

c  flex-end  靠下

 设置内容区的样式：.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;align-self: flex-end;}
内容区：<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>

如图所示：设置选定的子元素 flex-end后，盒子靠在了父元素盒子的最下面

d  center  居中

意思是设置选定的子元素center 后，盒子靠在了父元素盒子的最中间

e  stretch  默认值

和auto一样，意思是指定的子元素盒子还是停留在当前位置，没有变化

f  baseline  也是靠上的意思，和flex-start一样相当于是默认值