8.26_flex布局

❤flex布局 √

特点：布局简单 移动端运用多 pc端支持差 部分浏览器不支持

原理

• 通过给父盒子添加flex属性 来控制子盒子的位置和排列方式
• flexible box 缩写 flex 意思是弹性布局 任何一个容器都可以指定为flex布局
• 采用flex布局的元素称为flex容器 它的子元素称为flex项目
• flex项目可以再设置为flex容器
• flex容器可以横向排列也可以纵向排列

注：父盒子设为flex布局后 子元素float、clear、vertical-align属性失效

使用方法： 通过给父盒子添加display:flex来控制项目的位置和排列

flex父级属性

• flex-direction：设置主轴方向
• justify-content：设置主轴上子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴子元素的排列方式(多行)
• align-items：设置侧轴上子元素的排列方式(单行)
• flex-flow：复合属性 同时设置了主轴的方向和是否换行

主轴与侧轴的方向

※flex-direction 设置主轴的方向

注：设置谁为主轴 剩下的就是侧轴 子元素是跟着主轴来排列的

※justify-content 设置主轴排列方向

注：使用前确定主轴

※flex-wrap 设置项目换行

flex默认不换行 项目数量超过宽度会超出

当设置了换行时 单行和多行样式又同时存在 优先运用多行设置

不设置换行时 只运用单行设置

※align-items 设置侧轴上项目排列方式 单行

注：设置换行属性无效 因为只控制单行

※align-content 设置侧轴项目的排列方式 多行

align-items和align-content区别

• align-items 适用于单行 只有上对齐 下对齐 居中和拉伸
• align-content 用于多行的情况 在没有达到换行的数量情况下 多行属性是没用的
• 两者可以同时设置 单行时会自动应用align-item 多行会自动匹配align-content

flex-flow

是direction和wrap的复合型写法

/* 相当于同时设置了方向和换行 应该是可以单独只写其中一个的 */
flex-flow: column wrap; // 更改主轴方向为上下 并设置换行

注：方向轴垂直时 不能换行

项目属性

※flex 属性：定义子项目分配剩余空间 用flex表示份数 可以写百分比

align-self 属性：控制项目在侧轴单个的排列方式 可覆盖align-items属性 默认值auto

order属性：控制排序 默认0 数字越大越靠后 可以负值

移动端案例

导航栏固定定位后margin不生效 居中得使用固定定位left50% 自身宽度的百分之50

/* 使用固定定位导航栏 */
position: fixed;
top: 0;
left: 50%;
/* 固定盒子应该有的宽度 */
transform: translateX(-50%);

图片居中可以使用margin

flex常见布局思路

上图下字布局结构

• 默认主轴是x轴
• 将主轴设置为y轴
• 侧轴设置为居中对齐

c3盒子边框算在高度内 文字设置高度是应该减去边框等于内容高度

渐变背景色 linear-gradient

/* 背景线性渐变： */
background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(left top, red, blue);

注：必须添加私有前缀 方位词可以省略 默认从上到下 用逗号隔开