css3引入的弹性布局可以对容器中的条目更方便地排序,对齐和分配空间;弹性布局可以在容器不确定长宽的情况下进行填充,且可以根据窗口的大小来进行自适应.在正常的布局中是区分行内元素和块级元素,他们的排列方式有所不同,而在弹性布局上是不需要考虑元素的排列顺序.
弹性布局是对子元素有影响:
<style>
.content { border: 1px solid #ccc; box-shadow: 2px 2px 2px #ddd; padding: 40px 35px; display: flex; justify-content: space-between; align-items: center; } .content .box { width: 190px; height: 120px; border: 1px solid #03645a; border-radius: 5px; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.mt10 { margin-top: 10px; }
</style>
<div class="content">
<div class="box"> <img src="{% static 'img/web/us/promotion/crispr-cas9-knockout-mice-au/20180604-process1.png' %}" alt=""/> <p class="mt10">Nuclease vector</p> <p>construction</p> </div> <img src="{% static 'img/web/us/promotion/crispr-cas9-knockout-mice-au/20180604-arrow.jpg' %}" alt="" class="arrow"/> <div class="box"> <img src="{% static 'img/web/us/promotion/crispr-cas9-knockout-mice-au/20180604-process2.png' %}" alt=""/> <p class="mt10">Nuclease injection</p> <p>into mouse eggs</p> </div> <img src="{% static 'img/web/us/promotion/crispr-cas9-knockout-mice-au/20180604-arrow.jpg' %}" alt="" class="arrow"/> <div class="box"> <img src="{% static 'img/web/us/promotion/crispr-cas9-knockout-mice-au/20180604-process3.png' %}" alt=""/> <p class="mt10">Founder screening</p> </div> <img src="{% static 'img/web/us/promotion/crispr-cas9-knockout-mice-au/20180604-arrow.jpg' %}" alt="" class="arrow"/> <div class="box"> <img src="{% static 'img/web/us/promotion/crispr-cas9-knockout-mice-au/20180604-process4.png' %}" alt=""/> <p class="mt10">Breeding Founders</p> <p>to obtain F1</p> </div> </div>
上图是效果就是用了弹性布局,在这段代码中,父级元素中定义的
display: flex; //定义为弹性布局,对改容器的子级元素有效,而对子级的子级元素没有效果 justify-content: space-between; //定义子级元素的对齐方式,其中默认的是flex-start(主轴初始方向上的边界对齐),fled-end(主轴结束方向的边界对齐),space-between(两边对齐),space-around(每个子元素空白空间一样,但是第一个和最后一个与该行的边界是其它元素空白空间的一半) align-items: center; //交叉轴上的对齐方式
在弹性布局中可以自定义布局的方向,从上而下,从下而上,从左到有右或者从右到左都可以,在父级元素中使用flex-deriction
属性定义.弹性布局中不分上下左右方向,以主轴和交叉轴来描述方向,默认从左到右为主轴方向,从上到下为交叉轴方向,但是我们
可以自定义主轴和交叉轴,主轴方向和交叉轴方向,通过在父级元素中定义flex-deriction来定义方向,一旦主轴方向确定下来了,交叉轴就默认为另外一个方向,
flex-deriction:row; //默认值,主轴为水平方向,方向从左到右
flex-deriction:row-reverse; //主轴为水平方向,方向从右到左
flex-deriction:column; //主轴为垂直方向,方向从上而下
flex-deriction:column-reverse; //主轴为垂直方向,方向从下而上
在弹性布局中常用的还有flex-wrap属性:
flex-warp:nowrap(不换行)/wrap(换行)/wrap-reverse(换行,但是第一行在下方)