有关弹性盒子的那点事

时间 2019-11-08

标签有关弹性盒子那点栏目 CSS 繁體版

原文原文链接

　　导语（我这里的导语就是都是废话，没什么用的那种～）：这几天看了一个移动端的视频，由于我平时不怎么接触移动端。但好像移动端里总用到弹性盒子，虽然在pc端也有用，可是用得很少，也不知道为何。因此，今天正好好好了解下什么是弹性盒子，以及它有什么做用。css

　　弹性盒子：布局

　　要点1、弹性盒子实际上是由两部分组成：弹性容器(Flex container)和弹性子元素(Flex item)。flex

　　　　　　弹性容器：经过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。spa

　　　　　　弹性子元素：弹性容器内包含了一个或多个弹性子元素。code

　　要点2、弹性盒子的做用范围：视频

　　　　　　弹性盒子只定义了弹性子元素如何在弹性容器内布局。对象

　　　　　　也就是说，弹性容器外及弹性子元素内都是正常渲染的。blog

　　要点3、一、css 列（CSS columns）在弹性盒子中不起做用。it

二、float, clear and vertical-align 在flex项目中不起做用。io

　　要点4、弹性盒子的属性：

　　　　　　弹性盒子有如下几个属性：（我经常使用的为绿色）

　　　　　　一、display: flex | inline-flex; 二、flex-direction 三、flex-wrap 四、flex-flow 五、justify-content 六、align-items 七、align-content 八、flex-grow 九、flex-shrink 十、flex-basis 十一、flex 十二、align-self 。

　　　　　　下面，咱们来依次介绍他们。　　　

　　　　　　display: flex | inline-flex;

　　　　该属性适用于弹性容器(写在弹性容器里)。

　　　　　　做用：定义一个弹性容器

　　　　　　flex-direction：

　　　　　该属性适用于弹性容器(写在弹性容器里)。

　　　　　做用：定义是------设置或检索伸缩盒对象的子元素在父容器中的位置，即顺序指定了弹性子元素在父容器中的位置。

　　　　　　值：

- - row(默认值)：横向从左到右排列（左对齐），即水平显示，正如一行同样。
  - row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面)。
  - column：纵向排列。
  - column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

　　　　　　　 row:

　　　　　　代码：

<style>
#main {
    display: flex;
    flex-direction:row-reverse;
}
  
#main div {
    width: 40px;
    height: 40px;
}
</style>
</head>
<body>

<div id="main">
    <div style="background-color:coral;">A</div>
    <div style="background-color:lightblue;">B</div>
    <div style="background-color:khaki;">C</div>
    <div style="background-color:pink;">D</div>
    <div style="background-color:lightgrey;">E</div>
    <div style="background-color:lightgreen;">F</div>
</div>

　　　　效果：--------未完待续--------