CSS - Flex 之最直观的方式学习 Flexbox 属性（二）-阿里云开发者社区

CSS - Flex 之最直观的方式学习 Flexbox 属性（二）

2022-05-26 120

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS - Flex 之最直观的方式学习 Flexbox 属性（二）

wrap-reverse, Flex itms会被按照从左到右从下到上的顺序在多行中显示。

默认值：nowrap

注：这个属性也跟书写模式相关。

flex-flow

这个属性是flex-direction和flex-wrap属性的缩写。

例子：

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

默认值：row nowrap

justify-content

这个属性会根据当前容器的主轴来排列子元素。它可以在所有flex items都在同一行并且不可伸缩，或是可伸缩但是达到它们的最大尺寸时候，分配剩余空间。

例子：

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
}

Flex items在lrt上下文中会向左边靠拢

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}

Flex items在ltr上下文中向右靠拢

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

Flex items会居中

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}

除了第一个和最后一个，Flex items会有相同的间隔。

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}

所有Flex item 都会有相同间隔

默认值： flex-start

align-items

Flex items 会根据当前容器的主轴线对齐，跟justify-content很相似，但是方向垂直。

这个属性设置所有flex items默认对齐方式。

例子：

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}

Flex items会占满flex container的高度，从cross start到cross end

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}

CSS - Flex 之最直观的方式学习 Flexbox 属性（二）