当前位置：网站首页>flex布局常用属性总结

flex布局常用属性总结

2022-07-25 05:21:00 【忘喧】

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 属性。.

总结：

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