伸缩盒(弹性)布局------display:flex

7 篇文章 0 订阅
6 篇文章 0 订阅

display:flex;  让父元素变成伸缩盒布局,子元素默认水平排列(row);

flex-wrap:wrap;换行;

flex-direction:column;子元素竖着排列;

 flex 是 flex-growflex-shrinkflex-basis的缩写

 flex-grow:定义弹性盒子项(flex item)的拉伸因子

                  flex-grow: 3;

                  flex-grow:inherit;

// 常用flex属性 有一串数字123456789

    display: flex;
    flex-direction: column; // 排列:row: 1~9 从左到右排列 row-reverse 从右到左 9~1排列  

                                               column: 1~9 从上到下排列 column-reverse 从下到上 9~1排列
    align-items: flex-start; // 起始位置
    align-items: center; // 中间位置
    align-items: flex-end; // 最后位置
    
    justify-content: flex-start; // 起始位置
    justify-content: center; // 中间位置
    justify-content: flex-end; // 最后位置

align-items和justify-content组合起来就类似一个九宫格

<body>

  <h4>This is a Flex-Grow</h4>

  <h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>

  <div id="content">

    <div class="box" style="background-color:red;">A</div>

    <div class="box" style="background-color:lightblue;">B</div>

    <div class="box" style="background-color:yellow;">C</div>

    <div class="box1" style="background-color:brown;">D</div>

    <div class="box1" style="background-color:lightgreen;">E</div>

    <div class="box" style="background-color:brown;">F</div>

  </div>

</body>

flex-shrink:flex子项

        根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

flex-basis: flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值