JZTXT

flex布局

发布时间 2023-09-06 10:33:06作者: 躺尸的大笨鸟

初始化值：

  1. 元素不会在主维度方向拉伸，但是可以缩小
  2. 元素被拉伸来填充交叉轴大小

flex: initial; justify-content: flex-start; align-items: stretch

  • flex: 0 1 auto

flex: auto;

  • flex: 1 1 auto

flex: none;

  • flex: 0 0 auto

flex: 1;

  • flex: 1 1 0

怎么实现以下对其方式？margin-left: auto;
image
没有justify-self或者justify-item属性？

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div class="push">Four</div>
  <div>Five</div>
</div>
.box {
  display: flex;
}
.push {
  margin-left: auto;
}

什么设置了元素的基本大小？

  1. flex-basis 设置为 auto + width, 元素的大小 = width。
  2. flex-basis 设为了 auto 或 content（在支持的浏览器中）,元素的大小 = max-content。
  3. flex-basis 设为了 0？width无效。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox