Css的用法总结part3：css3弹性盒子模型

最新推荐文章于 2024-06-10 15:34:20 发布

那是遇知吧

最新推荐文章于 2024-06-10 15:34:20 发布

阅读量156

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_41406727/article/details/110089030

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

可参考：CSS3弹性盒子布局、CSS3 弹性盒子(Flex Box)

1：align-content 属性

定义：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

2：align-items 属性

定义：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

3：align-self 属性

定义：在弹性子元素上使用。覆盖容器的 align-items 属性。

4：justify-content 属性

定义：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

5：flex-wrap 属性

定义：设置弹性盒子的子元素超出父容器时是否换行。

6：flex-flow 属性

定义：flex-direction 和 flex-wrap 的简写

7：order 属性

定义：设置弹性盒子的子元素排列顺序。

8：flex 属性

9：flex-direction 属性

10：display：flex和display: inline-flex区别

定义：

flex：将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示

flex

.main{
      background-color: #0f0;
      display: flex;/*父div设置该属性*/
    }               
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }

此时没有为父元素main设置宽度，默认为100%；

inline-flex

//样式
.main{
      background-color: #0f0;
      display: inline-flex;/*父div设置该属性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }
    .main div:nth-child(2){
            height:60px;
    }
//DOM
<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

此处虽然木有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。