前端知识点

配色方案

本页目录

flex 弹性盒模型 ​

flex 是一维布局，即元素只能水平或者垂直排列，grid 是二维布局。

flex 属性 ​

父容器 ​

CSS
display: flex / inline-flex;

/* 定义子元素排列方向 */
flex-direction: row / row-reverse / column / column-reverse; 

/* 定义子元素溢出时是否换行 */
flex-wrap: nowrap / wrap / wrap-reverse; 

/* 缩写，默认为 row nowrap */
flex-flow: <flex-direction> <flex-wrap>; 

/* 水平方向（主轴上）的元素对齐方式 */
justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly;

/* 垂直方向（交叉轴）的元素对齐方式 */
align-items: flex-start / flex-end / center / base-line / stretch / space-evenly;

/* 当有多根轴线时生效，如定义了 flex-wrap: wrap; */
align-centent: normal / start / end / center / flex-start / flex-end  / space-between / space-around / space-evenly / stretch / base-line;
display: flex / inline-flex;

/* 定义子元素排列方向 */
flex-direction: row / row-reverse / column / column-reverse; 

/* 定义子元素溢出时是否换行 */
flex-wrap: nowrap / wrap / wrap-reverse; 

/* 缩写，默认为 row nowrap */
flex-flow: <flex-direction> <flex-wrap>; 

/* 水平方向（主轴上）的元素对齐方式 */
justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly;

/* 垂直方向（交叉轴）的元素对齐方式 */
align-items: flex-start / flex-end / center / base-line / stretch / space-evenly;

/* 当有多根轴线时生效，如定义了 flex-wrap: wrap; */
align-centent: normal / start / end / center / flex-start / flex-end  / space-between / space-around / space-evenly / stretch / base-line;

子容器（项目） ​

CSS
order: 0; /* 元素排列顺序（很少使用） */
flex-grow: 0; /* 以 flex-basis 为基础，剩余空间的分配比例，支持小数，0~∞ */
flex-shrink: 1; /* 当 flex 元素宽度之和大于容器宽度时的搜索比例，支持小数，0~∞ */
flex-basis: auto; /* 除元素占用剩余空间的分配，默认为 auto，可设置固定宽度 */
flex: none / flex-grow || flex-shrink || flex-basis; /* 0 1 auto */
align-self: auto / flex-start / flex-end / center / baseline / stretch;
order: 0; /* 元素排列顺序（很少使用） */
flex-grow: 0; /* 以 flex-basis 为基础，剩余空间的分配比例，支持小数，0~∞ */
flex-shrink: 1; /* 当 flex 元素宽度之和大于容器宽度时的搜索比例，支持小数，0~∞ */
flex-basis: auto; /* 除元素占用剩余空间的分配，默认为 auto，可设置固定宽度 */
flex: none / flex-grow || flex-shrink || flex-basis; /* 0 1 auto */
align-self: auto / flex-start / flex-end / center / baseline / stretch;

注：子容器中同事存在 width 与 flex: 1 时，flex: 1 的优先级更高。

问题 ​

1. 什么是弹性布局？ ​

弹性布局是指 flex 布局，采用 flex 布局的元素称为 flex 容器，它的所有子元素会成为该容器的成员；flex 默认会生成两根轴线，即主轴（main axis）与交叉轴（cross axis），容器的子元素默认会沿着主轴排列。

2. 使用弹性布局实现水平垂直居中？ ​

对其父容器设置以下属性：

CSS
.box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    display: flex;
    align-items: center;
    justify-content: center;
}

3. flex: 1; 是什么？ ​

flex: 1 是 flex-grow 的缩写，是将父容器下的当前元素在剩余空间中按照等比例分配; 还有 flex-shrink 与 flex-basis 两个可选属性，默认为 1 与 auto；flex-shrink 定义了当父容器剩余空间不足时的当前元素缩放规则，flex-basis 定义了父容器剩余空间的宽度，默认为 auto；

4. 在左侧宽度固定的两栏布局中，如何防止左侧固定宽度被右侧区域压缩？ ​

4.1 通过设置右侧弹性元素 width: 0 实现。 ​

原理：当父容器内部元素宽度之和超出父容器宽度时，就会挤压左侧固定区域的空间，如果左侧区域宽度还是不够，就会溢出父容器。 挤压左侧区域空间可以通过对左侧空间设置 flex-shrink: 0; 解决，但溢出父容器的问题（未完）

html
<div class="box">
    <div class="left-box"></div>
    <div class="right-box">
        111111111111111111111
    </div>
</div>
<div class="box">
    <div class="left-box"></div>
    <div class="right-box">
        111111111111111111111
    </div>
</div>
css
.box {
    display: flex;
}
.left-box {
    flex-shrink: 0;
    width: 200px;
}
.right-box {
    flex: 1;
    width: 0;   /* 通过设置宽度为0解决 */ 
}
.box {
    display: flex;
}
.left-box {
    flex-shrink: 0;
    width: 200px;
}
.right-box {
    flex: 1;
    width: 0;   /* 通过设置宽度为0解决 */ 
}
left-box
111111111111111111111

4.2 通过设置右侧区域 overflow: hidden 实现 ​

缺点：区域内的定位到外部的元素会被 hidden 掉。