css3弹性盒子

本文详细介绍了CSS3的弹性盒模型,包括box-sizing属性的content-box和border-box用法,以及父元素的justify-content、align-items、align-content和flex-direction、flex-wrap属性,还有子元素的flex、align-self、flex-grow和order属性。内容涵盖各种属性的值及其效果,帮助理解弹性盒子布局的工作原理。
摘要由CSDN通过智能技术生成

css3弹性盒子

1)box-sizing:content-box;

普通的盒子模型,加padding和border时盒子会变大,向外扩展

2) box-sizing:border-box;

盒子模型,加padding和border时,盒子不会变大,向内扩展

父元素
3) justify-content–规定子元素在水平方向位置

属性值:
flex-start:居左对其
flex-end:居右对齐
center:水平居中对齐
space-between:将第一个子元素布局在最左处,将最后一个子元素布局在最右处,将空白部分平均分配在所有子元素与子元素之间。
space-around: 将空白部分平均分配在以下几处:左边界与第一个子元素之间、各子元素与子元素之间、最后一个子元素与右边界之间。

如图所示:灰色区域为空白
在这里插入图片描述

4) align-items–规定子元素在垂直方向的位置

属性值
center:垂直居中对齐
flex-start:居上对其
flex-end:居下对其
stretch:同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度,则所有子元素高度被调整为最接近容器高度(当考虑元素边框及内边距时,当边框宽度与内边距均为0则等于容器高度)。
baseline:如果子元素的布局方向与容器的布局方向不一致,则该值的作用等效于flex-start属性值的作用。如果子元素的布局方向与容器的布局方向保持一致,则所有子元素中的内容沿基线对齐。

如图所示:灰色区域是空白
在这里插入图片描述

5) align-content–多行的时候,垂直排列

属性:
center:垂直居中对齐
flex-start:居上对其
flex-end:居下对其
如图所示:灰色区域是空白

在这里插入图片描述

6) flex-direction–设置容器中子元素排列方向

属性
row:横向排列(默认)
row-reverse:横向反向排列
column:纵向排列(坐标轴转了90度,水平和垂直反过来用)
colunm-reverse:纵向反向排列

[外链图片转存失败(img-cG8K4Lzp-1564681927702)(./1564680748026.png)]

7) flex-wrap—子元素是否在一行、列

属性:
nowrap:不换行
wrap:换行

[外链图片转存失败(img-dwWDpsYe-1564681927703)(./1564680798986.png)]
[外链图片转存失败(img-jRPm3G7j-1564681927754)(./1564680784281.png)]

8) flex-flow -->可以将flex-direction样式属性值与flex-wrap样式属性值合并书写在flex-flow样式属性中

flex-flow; row wrap;

子元素
1)flex:1; -->1指的是系数,将盒子分几份,占几份之一

举个栗子

<style type="text/css">
    .box {
        width:100%;
        height:450px;
        border:1px solid #000;
        display: flex;
    }
    .child1 {
        height: 100px;
        border:1px solid #624;
        background: #624;
        flex:1;//子元素一共是分4块,占1/4
    }
    .child2 {
        height: 100px;
        border:1px solid red;
        flex:3;//占3/4   
         }
    </style>
    <div class="box">
        <div class="child1">1</div>
        <div class="child2">2</div>
    </div>
2)align-self -->用来覆盖父元素的align-items属性

属性:
auto:继承父元素的align-items属性值
flex-start
flex-end
center
baseline
stretch

3)flex-grow:1 -->定义子元素放大比例

举例子:

   <style type="text/css">
    .parent{
        width: 500px;
        height: 400px; 
        border: 1px solid #67d;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .child {
        width: 100px;
        height: 100px;
        border:1px solid #a43;
        box-sizing: border-box;
        flex-grow: 1;
        align-self: center;
    }
    </style>
     <div class="parent">
         <div class="child">1</div>
         <div class="child">2</div>
         <div class="child">3</div>
         <div class="child">4</div>
         <div class="child">5</div>
         <div class="child">6</div>
         <div class="child">7</div>
         <div class="child">8</div>
     </div>
4) order:0 -->改变子元素的显示顺序,可以是负数,数值越小越靠前
    <style type="text/css">
    .parent{
        width: 500px;
        height: 400px; 
        border: 1px solid #67d;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .child {
        width: 100px;
        height: 100px;
        border:1px solid #a43;
        box-sizing: border-box;  
    }
    .child1 {
        width: 100px;
        height: 100px;
        border:1px solid #a43;
        box-sizing: border-box;
        order:-1
    }
    </style>
     <div class="parent">
         <div class="child">1</div>
         <div class="child">2</div>
         <div class="child">3</div>
         <div class="child">4</div>
         <div class="child">5</div>
         <div class="child">6</div>
         <div class="child">7</div>
         <div class="child1">8</div>
     </div>

[外链图片转存失败(img-s3rA8LAX-1564681927764)(./1564681372817.png)]

总结

1、要对元素使用弹性盒子布局,只要在其直接父级容器元素上设置display:flex即可
2、以下7个属性是加在flex container上的:
display:flex;
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
3、这6个属性是加在flex item上的
order
flex-grow
flex
align-self

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值