flex是什么——flex是什么游戏! -k8凯发

2023-03-15 09:08 1次浏览攻略

之前我们已经讨论了响应布局基本rem，本文和后续句子都主要知道响应布局方法flex grid等。

如有错误，还请指正，谢谢~

flex 概念

flex只是css3的一个属性，flex又称‘弹性布局’，它使得盒子的子元素可以自动排列

{
　display:flex;
}

经典的flex模型图：

说明：

主轴不一定是横向的，它和侧轴垂直，由 flex-direction 属性决定
flex item 不指定高度时，等于父元素的高度（换行则比例平分）

flex-container 相关属性

display:flex / inline-flex 都是flex布局， inline类似 inline-block ，盒子被加入了inline模型特性

1. flex-direction

flex-direction 决定了主轴和主轴方向，子元素顺着主轴的方向依次排列

row 默认值，主轴水平向右（元素水平向右排列）
column 主轴垂直向下（元素垂直向下排列）
row-reverse 水平反向（向左）
column-reverse 垂直反向（向上）

注：主要是row和column

示例：(全写成了id，忽略…)

2. flex-wrap

此属性指定子元素是否换行

nowrap 默认，不换行，如果子元素总长度大于父元素则等比压缩
wrap 换行，排不下的元素换行沿侧轴排列，如果高度不够则会超出
wrap-reverse 侧轴反向

注：侧轴其他操作，优先执行wrap

3. flex-flow

flex-flow:'direction' 'wrap' 是 flex-direction 和 flex-direction 的组合，方便简写，类似 background

4. align-items

侧轴有长度时，每个子元素沿侧轴的排列方式

strech 默认值，不排列，高度自适应父元素
flex-start 子元素沿侧轴起始点排列
center 中心点
flex-end 终点
baseline 根据第一个子元素的基线（content）排列

示例：

5. align-content

侧轴有长度时，所有子元素沿侧轴的排列方式，只适用于多行的情况（wrap）

strech 默认值，不排列，高度比例平分父元素
flex-start
center
flex-end
space-between 两端对齐，第一行放起点，最后一行放终点，其他行保持间距相等
space-around 元素被空间环绕，所有行的间距都相等，起点和终点的距离元素间距是行间距的一半

示例：

6. justify-content

所有子元素沿主轴的排列方式（单行多行都可）

flex-start 默认值
center
flex-end
space-between
space-around

示例：

flex-item 相关属性

1. order

order:num 用来指定子元素的顺序，默认0，值大的排在后面，也可以是负数

2. flex-grow

flex-grow:num 用来指定扩展分配比例，所有子元素长度小于父元素长度时，添加此属性的子元素，会按比例来分配剩余的宽度

3. flex-shrink

flex-shrink:num 在未指定wrap时，用来指定压缩比例（减去压缩的总长度百分比）

4. flex-basis

flex-basis:px 类似grow，分配剩余长度（像素），总和大于剩余宽度时，按比例分配

5. align-self

align-self:xx 指定元素自身的排列方式，优先级高于 align-items，值类似

本篇文章就到这里，下篇举例flex的应用

【关注一下不迷路】

html css html css javascript html javascript css javascript css

k8凯发-凯发k8国际手机app下载

flex是什么——flex是什么游戏! -k8凯发

k8凯发-凯发k8国际手机app下载

相关推荐