关于css3的弹性布局

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(换行,但是第一行在下方)

关于css3的弹性布局

猜你喜欢