移动web第三天

Flex主轴对其方式

与浮动(float)的不同

• 子元素无法撑开父元素
• flex写到父元素上，作用于里面的子元素

justify-content: center

• 所有子元素在主轴上居中显示

justify-content: space-around;

• 两边小，中间间距等分

justify-content: space-between

• 两边无，中间间距等分

justify-content: space-evenly

• 间距相同

justify-content: start;

• 左上

Flex侧轴对齐方式

align-items: center;

• 居中

align-items: flex-end;

• 居底

align-items: flex-start

• 居顶

align-items: stretch;

• 拉伸（默认）

Flex伸缩比

flex：1

• 分子为1，分母为子元素的多少
• 其他兄弟盒子设置过宽度，设置此元素的盒子拿取剩下的份数。

设置在子元素中，不能有宽度

Flex运用场景

用于移动端布局，pc端因为兼容性不考虑，以后可能会用

\