下面demo只展示center和stretch的栗子，其他几个可以参考flex-start和flex-end那样。

align-content

其他可以参考[justify-content]用法。

具体图片来至w3.org官方文档;

太麻烦。写不下去了，摔。

Flex项目

终于写到关于伸缩项目标相干属性了，主如果3个，order，flex(flex-grow，flex-shrink，flex-basis的组合)，align-self;用来比较多的是前两个。

order

有一种用法比较多，想设置一组中有两个元素一个排第一，别的一个排最后，主须要将第一个的order:-1;另一个为order:0;如许就好了。

譬如我们想控制一个container中有4个box，想box4为一个显示，box1为最后一个显示。只须要 如许

<style> 
 
.container{ 
 
display: flex; 
 
} 
 
.box1{ 
 
order:1; 
 
} 
 
.box4{ 
 
order:-1; 
 
} 
 
</style> 
 
<div class="container"> 
 
<div class="box1">1</div> 
 
<div class="box2">2</div> 
 
<div class="box3">3</div> 
 
<div class="box4">4</div> 
 
</div>  

显示效不雅就如许了：

我的看法

flex

[flex]属性可以用来指定可伸缩长度的部件，是flex-grow(扩大比例),flow-shrink(紧缩比例),flex-basis(伸缩基准值)这个三个属性的缩写写法，建议大年夜家采取缩写的方法而不是零丁来应用这3个属性。

flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>] 
 
// flex-grow是必须得flex-shrink和flow-basis是可选的  

• flex-grow:;个中number作为扩大比例，没有单位，初始值是0，重要用来决定伸缩容器残剩空间按比例应扩大若干空间。
• flex-grow:;个中number作为紧缩比例，没有单位，初始值是1，也就是残剩空间是负值的时刻此伸缩项目相对于伸缩容器里其他伸缩项目能紧缩的空间比例，在紧缩的时刻紧缩比率会以[flex-basis]伸缩基准值加权。
• flex-basis:|auto;默认是auto也就是根据可伸缩比率计算出残剩空间的分布之前，伸缩项目主轴长度的肇端数值。若在「flex」缩写省略了此部件，则「flex-basis」的指定值是长度零。

flex-basis用图来表示就是如许：

【编辑推荐】

1. 前端开辟js运算符单竖杠“|”的用法和感化及js数据处理
2. 前端一站式异常监控捕获筹划
3. 2017年前端开辟对象趋势
    3/4   首页 上一页 1 2 3 4 下一页 尾页
   
   

   　　推荐阅读

   　　金融大数据行业应用及发展全洞察

   在中国经济走向新常态的转型中，在中国经济成为全球第二大年夜经济体的成长中，在中国金融业向支撑实体经济、立异驱动的转换中，大年夜数据在金融范畴的应用，成为中国金融业的新增长点和>>>详细阅读

   
   

   本文标题：我对Flexbox布局模式的理解

   地址：http://www.17bianji.com/lsqh/35393.html

    1/2    1