快速了解 Flex 弹性布局
引言:2009年,W3C提出了一种新的方案—-Flex布局,Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。转眼就是18年,如今弹性布局也出现了9年了,已经被大多浏览器所支持:Chrome 21+,Opera 12.1+,FireFox22+,Safari6.1+,IE10+ (IE,,咳咳 )。 此文对flex 进行一个简单讲述,希望通过此文能够帮助快速上手了解这个布局。 内容分为三个部分:Flex容器,容器属性,以及项目属性。 ? 一、Flex容器:(此图引用自菜鸟教程flex篇) emmm,个人感觉就是X Y轴,从做左到右,从上到下。 ? 二、容器属性:一共六个1,flex-direction? : 决定主轴的方向(即项目的排列方向) 2,? flex-wrap : 如果一条轴线排不下,如何换行 3,? flex-flow:? ?flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap 4,??justify-content:?定义了项目在主轴上的对齐方式 5,?align-items :定义项目在交叉轴上如何对齐 6,?align-content:?定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用 ? 首先,有请此次demo 的主角,一个基础的布局,其最初样式: <style> .box{ margin: 50px auto; display: flex; /* 父元素声明弹性布局*/ width: 400px; height: 400px; background-color: bisque; } .box1{ width: 50px; height: 50px; text-align: center; line-height: 50px; background-color: aqua; margin: 2px; } </style> <body> <div class="box"> <div class="box1">1</div> <div class="box1">2</div> <div class="box1">3</div> <div class="box1">4</div> </div> </body>
可以看出,当我们设置父级元素 display flex 时,子元素就默认排成一排,这也是flex 布局的特点之一,所以有时候也将其代替 浮动,或者 display:inline-block 排成一排的方案。 ? 第一个属性: flex-direction: row | row-reverse | column | column-reverse; 对应方向即:X轴的左,右;以及Y轴的上,下
flex-wrap: nowrap | wrap | wrap-reverse; 即当子元素在一行排列,超出父元素时,其排列方式,对应为:
我们将demo 的子元素增加几个,进行测试,效果为: 看上图,此时子元素因为不换行而被挤压,失去了原有的宽度,但是比较有趣的是,如果是Y轴排列,不换行的话,子元素会超出父元素,而不会挤压高度。 ? ? ? ? 我们可以看到,换行后,换行间距非常大,两行间并没有贴近在一起。这个问题接下来会考虑解决,所以看到此处不需要考虑太多,只需记住换行效果即可。 flex-flow: <flex-direction> || <flex-wrap>;
flex-direction + flex-wrap 的缩写形式 例如:
justify-content: flex-start | flex-end | center | space-between | space-around; 定义了项目在主轴上的对齐方式
flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 其效果对应为:
align-items: flex-start | flex-end | center | baseline | stretch;定义项目在交叉轴上如何对齐。 其对应效果为: ? 第六个属性: align-content: flex-start | flex-end | center | space-between | space-around | stretch; 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
1,flex-start:与交叉轴的起点对齐, ??三:项目属性未完待续
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |