• 12. Flex 弹性布局 BootStrap


    使用.d-flex和.d-inline-flex实现开启flex布局样式;【开启弹性布局】

    .flex-row可以呈现子元素水平方向的位置,默认居左并从左到右显示(1,2,3)【学过flex的都知道 x是默认的主轴】

    .flex-row-reverse子元素水平方向居右从左到右显示(3,2,1) ;【横向反转弹性布局】

    例:

    <!--使用.d-flex和.d-inline-flex实现开启flex布局样式;【开启弹性布局】
    .flex-row可以呈现子元素水平方向的位置,默认居左并从左到右显示(1,2,3)【学过flex的都知道 x是默认的主轴】
    .flex-row-reverse子元素水平方向居右从左到右显示(3,2,1) ;【横向反转弹性布局】-->
    
    <div class="d-flex flex-row  border border-info w-75  ">
        <div class="p-2 border border-warning ">1</div>
        <div class="p-2 border border-warning ">2</div>
        <div class="p-2 border border-warning ">3</div>
    </div>
    
    <!--下面是反转-->
    <div class="d-flex flex-row flex-row-reverse   border border-info w-75">
        <div class="p-2 border border-warning ">1*</div>
        <div class="p-2 border border-warning ">2*</div>
        <div class="p-2 border border-warning ">3*</div>
    </div>

    .flex-column 实现子元素垂直效果,并从上往下显示(1,2,3)  【学过flex的都知道 y是默认的侧轴】

    .flex-column-reverse实现子元素垂直效果,并从上往下显示(3,2,1)【竖向反转弹性布局】

    <!--.flex-column 实现子元素垂直效果,并从上往下显示(1,2,3)  【学过flex的都知道 y是默认的侧轴】
    .flex-column-reverse实现子元素垂直效果,并从上往下显示(3,2,1)【竖向反转弹性布局】-->
    
    <div class="d-flex flex-column  border border-info w-75  ">
        <div class="p-2 border border-warning ">1</div>
        <div class="p-2 border border-warning ">2</div>
        <div class="p-2 border border-warning ">3</div>
    </div>
    <br>
    <br>
    <!--反转-->
    <div class="d-flex flex-column flex-column-reverse  border border-info w-75  ">
        <div class="p-2 border border-warning ">1</div>
        <div class="p-2 border border-warning ">2</div>
        <div class="p-2 border border-warning ">3</div>
    </div>

    .justify-content-start(end、center、between、around)实现内容对齐;

    <!--.justify-content-start(end、center、between、around)实现内容对齐;
    老规矩这里只测试row的end  其他的自己测试【包括column 和 反转】
    --> <!--被内容移动到最后【右】了 justify-content-end --> <div class="d-flex flex-row justify-content-end border border-info w-75 "> 

    <div class="p-2 border border-warning w-25">1</div>
    <div class="p-2 border border-warning w-25">2</div>
    <div class="p-2 border border-warning w-25">3</div>
    </div>

    <br>
    <br>

    <!--因为是反转的 参照反转的来移 被内容移动到最后【左】了 justify-content-end -->

    <div class="d-flex flex-row flex-row-reverse justify-content-end border border-info w-75 ">
    <div class="p-2 border border-warning ">1</div>
    <div class="p-2 border border-warning ">2</div>
    <div class="p-2 border border-warning ">3</div>
    </div>

    .align-items-start(end、center、baseline、stretch)实现项目对齐;【flex:父】

    .align-self-start(end、center、baseline、stretch)实现单项目对齐;【flex的子元素 子】

    <!--
    .align-items-start(end、center、baseline、stretch)实现项目对齐;【flex:父】
    .align-self-start(end、center、baseline、stretch)实现单项目对齐;【flex的子元素 子】
    
    老规矩这里只测试row的end  其他的自己测试【包括column 和 反转】
    -->
    <!-- flex-row align-items-end-->
    <div class="d-flex flex-row border border-dark  align-items-end " style="height: 300px;">
        <div class="border border-warning p-5">1</div>
        <div class="border border-warning p-5">2</div>
        <div class="border border-warning p-5">3</div>
    </div>
    
    <br>
    <br>
    
    <!-- flex-row align-self-start / end / center-->
    <div class="d-flex flex-row border border-dark" style="height: 300px;">
        <div class="border border-warning p-5 align-self-start">1</div>
        <div class="border border-warning p-5 align-self-center">2</div>
        <div class="border border-warning p-5 align-self-end">3</div>
    </div>

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14878899.html

  • 相关阅读:
    CSS的水平居中和垂直居中解决方案
    如何组织CSS?
    关于前端工程师一定要做的6件事和自己的感悟
    让透明div里的文字不透明
    利用css3的多背景图属性实现幻灯片切换效果
    CSS响应式布局到底是什么?
    整站快速变黑白灰的方法
    分析一下jquery中的ajax操作
    什么是jquery中的事件委派?
    关于checkbox的一些jquery操作
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14878899.html
Copyright © 2020-2023  润新知