order | flex-grow | flex-shrink | flex-basis | flex | align-self | stretch (适用于父类容器【弹性盒子】元素子项目上)

定义:
order:用于控制Flex项目的排列顺序,默认为0,值越小越靠前。可取的值:0 | 1
flex-grow:用于定义Flex项目的放大比例,默认为0,即使存在剩余空间,也不放大。可取的值:0 | 1
flex-shrink:用于定义Flex项目的缩小比例,默认为1,即空间不足,Flex项目将等比缩小。可取的值 0 | 1
flex-basis:用于定义如何分配多余空间默认值为auto,即Flex项目本来的大小
flex:flex属性是flex-grow,flew-shrink和flex-basis的简写。默认值为0 1 auto
align-self:允许单个Flex项目有不同于其他Flex项目的对齐方式。默认值为auto,表示继承父元素的align-items属性,如果不存在父元素,则等同于stretch。可取的值:flex-start | flex-end | center | baseline | stretch;

语法属性

order | flex-grow | flex-shrink | flex-basis | flex | align-self | stretch

例子演示

order

flex-grow

flex-shrink

align-self(不设置align-self)

align-self(设置了align-self:stretch)

代码清单

HTML代码

		
 <h3>order</h3>
<ul class="flex-container container-24">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>order</h3>
<ul class="flex-container container-25">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>flex-shrink</h3>
<ul class="flex-container container-26">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-self(不设置align-self)</h3>
<ul class="flex-container container-27">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-self(设置了align-self:stretch)</h3>
<ul class="flex-container container-28">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
		
	

CSS代码

		
.container-24 li:nth-child(3){order: -1}
.container-25 li{flex-grow:1}
.container-26 li{width: 125rem; flex-shrink:1}

.container-27{align-items: center;}
.container-27 li:nth-of-type(1){padding: 2rem 3rem}
.container-27 li:nth-of-type(2){padding: 1.5rem 3rem}
.container-27 li:nth-of-type(3){padding: 1rem 3rem}
.container-27 li:nth-of-type(5){padding: 1.5rem 3rem}

.container-28{align-items: center;}
.container-28 li:nth-of-type(1){padding: 2rem 3rem}
.container-28 li:nth-of-type(2){padding: 1.5rem 3rem}
.container-28 li:nth-of-type(3){padding: 1rem 3rem}
.container-28 li:nth-of-type(5){padding: 1.5rem 3rem}
.container-28 li:nth-of-type(2){align-self:stretch}