Box垂直居中、Flex弹性布局

黄良钵

分类: 程序开发 223 0

Flex弹性布局

Box垂直居中:

html:

    <body>
       <section>
           <span>垂直水平居中</span>
       </section> 
    </body>

css:

            section{
                display: -moz-box;
                display: -webkit-box;
                width:300px;
                height: 300px;
                border:1px solid blue;
                -moz-box-pack: center;
                /*水平居中 必须写在容器中*/
                /*-webkit-box-pack: center;*/
                /*-moz-box-align: center;*/
                /*垂直居中*/
            }
            span{
                display: -moz-box;
                /*子标签也必须写上此样式*/
                -moz-box-align: center; 
            }

Flex弹性布局

html:

    <body>
        <!--<span>b</span>-->
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <!--<span>q</span>-->
    </body>

css:

            body{
                margin: 0;
                height: 100%;
                display: flex;
                /*开启弹性布局*/
                /*flex-direction属性决定项目在主轴上的方向*/
                /*flex-direction: row-reverse;*/
                /*flex-direction: column;*/
                /*flex-direction: column-reverse;*/
            }
            section{
                /*width:25%;
                height: 25%;*/
                flex-basis: 25%;
                /*height: 25%;*/
                border:1px solid blue;
            }
            section:nth-child(1){
                order: 4;
            }
            section:nth-child(2){
                order: 1;
            }
            section:nth-child(3){
                order: 2;
                /*order属性定义项目的排列顺序,数值越小越靠前 默认为0*/
            }
            section:nth-child(4){
                order: 3;
            }

分配空间

            body{
                margin: 0;
                height: 100%;
                display: flex;
            }
            section{
                border: 1px solid blue;
            }
            section:nth-child(1){
                flex-basis: 150px;
                /*flex-grow: 2;*/
                /*flex-grow  属性定义项目的放大比例
                默认是0 即如果存在剩余空间也不放大
                flex-grow是将剩余空间划分成所有flex-grow值
                的总和和指定分数 然后在将这些分数分配下去
                */
                flex-shrink: 0;
            }
            section:nth-child(2){
                flex-basis: 100px;
                /*flex-grow: 1;*/
                flex-shrink:1;
                
            }
            section:nth-child(3){
                flex-basis: 500px;
                /*flex-grow: 1;*/
                flex-shrink: 3;
                /*flex-shrink默认为1 当空间不足时等比例缩放
                将flex-shink设置为0将不会收缩 值越大收缩的越厉害*/
            }
            section:nth-child(4){
                flex-basis: 400px;
                /*flex-grow: 1;*/
                flex-shrink:1;
            }

基本对齐

            body{
                margin: 0;
                height: 100%;
                display: flex;
                justify-content: center;
                /*justify-content: space-between;*/
                /*justify-content: space-around;*/
                /*justify-content属性决定项目在主轴上的对齐方式*/
                align-items: center;
                /*align-items: flex-start;*/
                /*align-items: flex-end;*/
                /*font-size: 300px;
                align-items: baseline;*/
                /*baseline即4线格中的第3线*/
                /*stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。*/
                /*align-items属性决定项目在交叉轴上的对齐方式*/
            }
            section{
                border:1px solid blue;
                text-align: center;
                font-size: 16px;
            }
            section:nth-of-type(1){
                flex-basis: 150px;
                /*height: 200px;*/
            }
            section:nth-of-type(2){
                flex-basis: 50px;
                height: 150px;
            }
            section:nth-of-type(3){
                flex-basis: 200px;
                /*height: 50px;*/
                /*align-self: flex-end;*/
                /*align-self: flex-start;*/
                /*align-self: center;*/
                /*align-self: baseline;*/
                align-self: stretch;
                /*stretch 指定高度时不起作用 
                标签自身在交叉轴的对齐方式 即会覆盖掉
                父元素指定的algin-items样式*/
            }
            section:nth-of-type(4){
                flex-basis: 100px;
                height: 250px;
            }

换行对齐
html

    <body>
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
    </body>

css

            body{
                display: flex;
                margin: 0;
                height: 100%;
                flex-wrap: wrap;
                /*align-content: flex-end;*/
                /*align-content: center;*/
                align-content: space-around;
                /*align-content: stretch;*/
                /*align-content行间对齐方式 如果不换行则此样式无效果*/
                justify-content: center;
                align-items: center;
            }
            section{
                width: 150px;
                /*height: 50px;*/
                border:1px solid blue;
            }

演示:(如打不开,请右键鼠标——在新标签页中打开)
Box垂直居中

Flex弹性布局

分配空间

基本对齐

换行对齐

推荐阅读:

Flex 布局教程:语法篇 - 阮一峰的网络日志

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
Box垂直居中、Flex弹性布局

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “Box垂直居中、Flex弹性布局”

Loading...