flex布局常用属性

flex 布局

flexible 弹性布局

在开始学习之前，需要对flex 布局的一下概念有一些了解

flex container ：开启了flex 布局的元素叫 flex container

display: flex; /* 开启flex 并且flex container 是块级元素 */

display:inline-flex /* 开启flex 并且flex container 是行内级元素 */

flex items: flex container 里面的直接子元素叫做 flex items

主轴:

可以看成是水平方向的横轴

交叉轴 ：

可以看成是垂直方向的竖轴

flex container 上的CSS 属性

<div class="container">
  <div class="sum">1</div>
  <div class="sum">3</div>
  <div class="sum">4</div>
</div>

.container {
      display: flex;
      width: 100%;
      background-color: green;
  }

设置在container 上的属性，即是在父元素生设置的css属性

flex-direction 方向默认是横向

row | row-reverse | column | column-reverse;

默认是row，所以主轴将沿着 inline 方向延伸， column 或者 column-reverse时，主轴会沿着上下方向延伸 — 也就是 block 排列的方向

flex-direction 可以改变主轴和交叉轴的方向

flex-wrap

flex-wrap:nowrap； 换行

如果不不换行， 那么子元素宽度之和超过容器父元素宽度时，那么子元素会被压缩且是平分父元素的宽度

flex-wrap: wrap; // 换行

flex-wrap: wrap-reverse;

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-wrap: nowrap | wrap | wrap-reverse;

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

决定了水平方向子项的对齐和分布方式

align-content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

align-content可以看成和justify-content是相似且对立的属性，justify-content指明水平方向flex子项的对齐和分布方式，而align-content则是指明垂直方向每一行flex元素的对齐和分布方式。

place-content

其实 place-content 是 align-content 和 justify-content 的简写属性；

align-items 垂直方向对齐

flex-flow: flex-start| flex-end|center| stretch| baseline

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在垂直方向上的对齐方式

align-items 只是说垂直方向的 对齐,相对 对齐和分布来说属性也比较少：

place-items

而 place-items 是 align-items 和 justify-items 的简写属性。

flex items 上的CSS属性

<div class="container">
  <div class="sum">1</div>
  <div class="sum">3</div>
  <div class="sum">4</div>
</div>

.container .sum {
    background-color: antiquewhite;
    height: 300px;
    flex-basis: 700px;  
    /* flex: 0 1 400px; */
    border: 1px solid red;
    }

.container :nth-child(1) {
    /* flex-grow: 1; */
    flex-shrink: 10;
    /* flex: 1 1 400px; */

}
.container :nth-child(2) {
    /* flex-grow: 2; */
    /* flex: 2 1 400px; */

    background-color: yellow;
} 

设置在sum上的属性，即是在子元素生设置的css属性

flex-grow

flex-grow: 这个 flex 子元素得到（伸张）多少

控制分配空闲剩余空间，即在没有子元素没有充满父元素的时候，子元素可以分配剩余的空间

flex-shrink

flex-shrink: 从这个 flex 子元素要消除（收缩）多少

在子元素溢出的时候回生效，子元素会缩小，防止内容溢出

flex-basis

flex-basis: 在 flex 子元素未伸张和收缩之前，它的大小是多少？

相对于width 属性，设置了width，那么子元素的basis 就是width

如果没事设置item元素的宽高，那么高度会充满父元素的高度，宽度时内容宽度

basis 会覆盖width 的值

flex

一个复合的属性:三个值：flex-grow ，flex-shrink， flex-basis

align-self

交叉轴对齐方式

align-self 属性可重写灵活容器的 align-items 属性。.

总结：

1. direction - 控制主轴和交叉轴的方向，开始线和结束线
2. flex-wrap - 控制换行
3. justify-content - 控制主轴（横轴）上所有 flex 项目的对齐。
4. align-items - 控制交叉轴（纵轴）上所有 flex 项目的对齐。
5. align-self - 控制交叉轴（纵轴）上的单个 flex 项目的对齐。
6. align-content - 控制“多条主轴”的 flex 项目在交叉轴的对齐。
7. flex-grow - 分配空闲空间
8. flex-shrink - 分配负极空闲空间
9. flex-basis - 设置子项的宽度

https://www.zhangxinxu.com/wordpress/2019/12/css-flex-deep/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox

这篇好文章是转载于：学新通技术网