JavaScript伸缩盒布局、网格布局学习

伸缩盒布局flex

详细学习: 博客地址
一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

.one{
            display: flex;
            justify-content: flex-end;
            /* 默认的布局为：flex-direction:row;
                默认的对齐方式为： justify-content:flex-start;
            */
            /*flex-flow: column wrap;*/
     }
 <div class="one">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

速写形式flex:flex-grow,flex-shrink,flex-basis
①flex-grow属性用于设置或检索弹性盒子的扩展比率；
②flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。
③flex-basis属性用于设置或检索弹性盒伸缩基准值；

body>.one>div{
            flex: 40px;
/*该值随着flex-direction的取值而改变，若是column就成为高的修饰，如果是row就成为宽*/
        }

flex-direction:row;

flex-direction:column;

flex-wrap

规定弹性项目是否应换行

取值	描述
nowrap	规定弹性项目不会换行(默认值)
wrap	规定弹性项目会在需要时换行
wrap-reserve	规定性项目会在需要时换行，以反方向
initial	将此属性设置为其默认值
inherit	从其父元素继承此属性

.one{
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

justify-content

主轴对齐方式

取值	描述
flex-start	在主轴开始显示(默认值)
flex-end	在主轴结束显示
center	在主轴中心显示
space-aruond	填充空白自适应在主轴中心显示
space-between	填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白

align-items

交叉轴对齐方式

取值	描述
flex-start	在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部
flex-end	在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部
stretch	将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器(默认值)
center	盒子在交叉轴中心显示
baseline	基线对齐

align-items: flex-start;

align-items: center;

align-items: stretch;

第三方网格框架Bootstrap

在线引入

<!-- CSS 引入css文件-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-olOxEXxDwd20BlATUibkEnjPN3sVq2YWmYOnsMYutq7X8YcUdD6y/1I+f+ZOq/47" crossorigin="anonymous">
<!-- jQuery and JavaScript Bundle with Popper 同时要引入js文件和bootstrap.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-NU/T4JKmgovMiPaK2GP9Y+TVBQxiaiYFJB6igFtfExinKlzVruIK6XtKqxCGXwCG" crossorigin="anonymous"></script>

本地引入

    <link href="./bootstrap.css" rel="stylesheet">
    //引入bootstrap样式