Day8-CSS6：flex布局，个人简历项目

1.flex布局剩余

flex子级元素的换行显示

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

flex换行后行的显示方式（多行侧轴对齐方式）

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

作用是设置换行之后，行的显示效果。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

值	描述
stretch	默认值。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center	元素位于容器的中心。 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start	元素位于容器的开头。 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end	元素位于容器的结尾。 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between	元素位于各行之间留有空白的容器内。 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around	元素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。

实践 开启flex布局 方式1：使用justify-content: space-between;align-content: space-between;实现水平和垂直布局 方式2：设置间隙gap也可以实现子元素自动排布

修改轴向

flex-direction 属性规定灵活项目的方向。

值	描述	实例
row	默认值。灵活的项目将水平显示，正如一个行一样。	尝试一下 »
row-reverse	与 row 相同，但是以相反的顺序。	尝试一下 »
column	灵活的项目将垂直显示，正如一个列一样。	尝试一下 »
column-reverse	与 column 相同，但是以相反的顺序。	尝试一下 »

修改轴向以后的布局技巧
flex-direction: column; /* 更改轴向 */
/* 想要实现子元素水平居中，现在水平方向是侧轴，侧轴水平居中，实现align-items */
align-items: center;
​
/* 想要实现子元素垂直居中，现在垂直方向是主，主轴垂直居中，实现justify-content: center */
justify-content: center;

连写

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit 默认值是 "row"。 规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 默认值是 "nowrap"。 规定灵活项目是否拆行或拆列。

order 属性

设置或检索弹性盒模型对象的子元素出现的順序。

2.flex属性详解

flex属性其实是一个复合属性，是flex-grow，flex-shrink和flex-basis属性的简写——

默认值：0 1 auto（不放大，自动缩小，初始宽度为自身宽度） 或flex：initial

其他取值：none（0 0 auto）不放大，不缩小，自身宽度

auto（1 1 auto）放大，缩小，自身宽度

非负数字 ==> flex:1;(1 1 0%) 放大，缩小，占父级剩余尺寸的份数

像素值==>flex200px;(1 1 像素值) 放大，缩小，子元素初始宽度（常用

flex-grow

：定义子项的放大比例，默认为0，如果父元素存在剩余空间，子元素也不会放大

操作：1.将father设置50%宽，拖动浏览器，发现子元素没有跟着放大。

原因：flex-grow默认值是0

操作：2.给c1添加flex-grow，1.可以看到c1跟着父类变大而变大

flex-shrink

：定义子项的缩小比例，默认为1，如果父元素剩余空间不足，子元素将会缩小

操作：

1.1.将father设置50%宽，拖动浏览器，发现子元素跟着缩小，因为flex-shrink默认为1

2.给c1添加flex-shrink：0，c1就不会跟着father缩小

flex-basis

：定义子项在分配多余空间之前，子项所占据的主轴空间，默认是auto，即子项本身的大小

操作：

1.将father设置50%宽，拖动浏览器，发现子元素没有跟着放大，因为flex-basis默认为auto（项目本身的大小）,可以认为是子元素的初始宽度

2.auto默认值，长度等于灵活项目的长度，如果没有指定项目长度，则为内容的长度

3.百分比：20%，占父级尺寸的20%

4.像素值：具体的单位长度，定义初始长度flex-basis: 200px;相当于width（前提是，主轴在水平方向。如果主轴在垂直方向，则设定的为高度

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。

小米案例改进

1.将父容器的宽度设置为90%

2.将子项的宽度都使用flex：像素值来设置，子项即可放大缩小

3.将除了item的高度300px固定以外，其他子项的高度都去掉，默认由内容决定

设置出了子项高固定不变，左布局与右布局随着浏览器窗口大小变化而变化的布局

3.个人简历项目

注意事项

1. 页面布局顺序：从上到下，从左到右，从外向里
2. CSS书写顺序：
    重要性：
        1.如果顺序不对，有可能会影响页面布局（line-height和字体连写的冲突）
        2.方便程序员维护，一般会把布局属性等一些重要属性写在前面，点缀属性放后面
    一般顺序：
        1.布局属性
            display   float  position
        2.尺寸+背景+盒子模型
            width height background margin padding border
        3.文本内容属性
            color font text-align line-height
        4.点缀属性
            border-radius 阴影（text-shadow，box-shadow） 光标效果（cursor）
3.选择器的使用
    推荐使用——类+后代
        一般后代选择器层级不要超过三个

动态设置元素属性

1.根选择器：
    也是一个伪类，表示文档的根元素选择器
    在：root中声明的属性相当于一个全局的属性，只要在当前页面中引入了：root所在的文件，就可以使用var（）函数来引用
:root
{
    background:#ff0000;
}

var（）函数调用

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

使用 var() 函数调用多个自定义的值：
:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
 
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
 
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

使用

1.在根选择器中定义一个自定义的属性
:root {
    --blue:blue;
}
2.在页面中选择不同的元素使用var()插入自定义属性的值
div {
    color:var(--blue);
}

项目环境搭建

1.创建一个文件夹（self-intro-main），表示项目名，不要用中文
2.创建CSS文件夹，存放CSS文件，images文件夹，存放图片资源，index.html文件用于书写页面
3.将CSS文件和图片复制到对应文件夹，把favicon.icon放在项目的根目录下
4.引入图标，css文件，font-awesone的链接