介绍 & lt; ! DOCTYPE html>
& lt; html>
,,,& lt; head>
,,,,,,,& lt; meta charset=癠TF-8"比;
,,,,,,,& lt; title> & lt;/title>
,,,& lt;/head>
,,,& lt; body>
,,,,,,,& lt; div 风格=翱矶?300 px;边界:1 px solid 红色;显示:,flex; flex-direction:,行,“比;
,,,,,,,,,,,& lt; div 风格=翱矶?,100 px;高度:,100 px; background:,黑色;“祝辞& lt;/div>
,,,,,,,,,,,& lt; div 风格=翱矶?,100 px;高度:,100 px; background:,绿色的;“祝辞& lt;/div>
,,,,,,,,,,,& lt; div 风格=翱矶?,100 px;高度:,100 px; background:,黄色;“祝辞& lt;/div>
,,,,,,,,,,,& lt; div 风格=翱矶?,100 px;高度:,100 px; background:,蓝色;“祝辞& lt;/div>
,,,,,,,& lt;/div>
,,,& lt;/body>
& lt;/html> & lt; ! DOCTYPE html>
& lt; html>
,,,& lt; head>
,,,,,,,& lt; meta charset=癠TF-8"比;
,,,,,,,& lt; title> & lt;/title>
,,,& lt;/head>
,,,& lt; body>
,,,,,,,& lt; div 风格=翱矶?300 px;边界:1 px solid 红色;显示:,flex; flex-wrap:,包装,“在
,,,,,,,,,,,& lt; div 风格=翱矶?,100 px;高度:,100 px; background:,黑色;“祝辞& lt;/div>
,,,,,,,,,,,& lt; div 风格=翱矶?,100 px;高度:,100 px; background:,绿色的;“祝辞& lt;/div>
,,,,,,,,,,,& lt; div 风格=翱矶?,100 px;高度:,100 px; background:,黄色;“祝辞& lt;/div>
,,,,,,,,,,,& lt; div 风格=翱矶?,100 px;高度:,100 px; background:,蓝色;“祝辞& lt;/div>
,,,,,,,& lt;/div>
,,,& lt;/body>
null
小编给大家分享一下CSS中显示:flex布局的使用示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
第一个属性和用法:flex-direction
我了解的方法有4个:行(水平排列),row-revese(水平反向排列),列(垂直排列),column-reserve(垂直反向排列)
上面的代码和效果图是属性为一行时的效果
注意:虽然是设置好的宽度,但是父容器只有300 px,子div没法达到100 px,而是适应父容器
只需要将flex-direction:行代码替换成flex-direction: row-revese或者flex-direction:列或则flex-direction: column-reserve,就可以得到不同的效果
下面是效果图:
row-revese
- - - - - - -
列- - - - - - -
column-reverse
- - - - - - -
第二个属性和用法:flex-wrap
这是换行属性:nowrap(不换行),包装(换行),wrap-reverse(方向换行)
