Get Started

• 布局
• float布局
• flex布局

布局是什么

把页面分成一块一块，按左中右，上中下等排列。

布局分类

• 两种
固定宽度布局，一般宽度为960/1000/1024px
不固定宽度布局，主要靠文档流的原理来布局
• 文档流本来就是自适应的，不需要加额外的样式
• 第三种布局
响应式布局
意思就是PC上固定宽度，手机上不固定宽度
也就是一种混合布局

布局的两种思路

• 从大到小
先定下大局
然后完善每个部分的小布局
• 从小到大
先完成小布局
然后组合成大布局
• 两种均可
新人推荐用第二种，因为小的简单
老手一般用第一种，因为熟练有大局观
布局需要用到哪些属性
• 一图流

Float布局

• 步骤
子元素上加float: left和width
在父元素上加 .claerfix（必须要加！！！）
• note：
在div上加上float: left;就不是文档流了。
固定写法↓

    <header class="clearfix">
    .clearfix::after{
      content: '';
      display: block;
      clear: both;
    }

如果发现图片背景色超出border，用vertical-align: top/middle;(可搜索方应杭line height)
• float: left;能将文档流宽度自适应
• 有的时候border会干扰宽度，可以改成outline: 1px solid red;outline是不占宽度的
• 居中
○ 只对块级元素有用
margin: 0 auto;上下margin都为0的居中，一般不用
margin-left: auto; margin-right: auto;
一般居中用这个，只设置左右，不覆盖上下。因为css是层叠样式表
• 经验
有经验者会留一些空间或者最后一个不设width
不需要做响应式，因为手机上没有IE，而这个布局是专门为IE准备的
IE 6/7存在双倍margin bug，解决办法有两个（在float的左边加上外边距就会双倍）
意识将错就错，针对IE 6/7把margin减半
二是神来一笔，再加一个display:inline-block

实践

用float做两栏布局（如顶部条）
用float做三栏布局（如内容区）
用float做四栏布局（如导航）
用float做平均布局（如产品展示区）
○ 做平均布局时，在布局中间加上一个x图层，右边距可以用负margin来扩充
○ 正margin是对内，负margin是对外（父类宽度不够时可用-margin来扩大）
经验
加上头尾，即可满足所有PC页面需求
手机页面不用float
float要程序员自己计算宽度，不灵活
float用来应付IE足以

flex布局

• 教程（来自CSS Tricks）
• 把教程过一遍，然后忘掉
• 完成Flex青蛙游戏
• 开始用flex

container容器

最好不要使用别人看不懂的缩写，尽量写全。

• display: flex; 让一个元素变成flex容器，只有两种写法

.container{
        display: flex;/*or inline-flex*/
}

flex-direction: column|column-reverse|row|row-reverse;/*纵or 横*/
• flex-wrap 改变折行
弹性盒，若不做处理，一行多有少排多少
flex-wrap: wrap|nowrap|wrap-reverse; //折行
• justify-content 主轴对齐方式
默认主轴是横轴，除非改变了flex-direction方向
flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。

.container{
        justify-content: flex-start | flex-end | flex-center | space-between | space-around | space-evenly;
}

• flex-direction 定义轴的方向
wrap和direction可以缩写成flex-flow:flex-direction flex-wrap
• align-items次轴对齐方式
flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器。
• align-content多行内容分布
flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。
※这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果

Flex item 样式

• item上面加order（排列顺序）
按照order的顺序从小到大排列
• 加flex-grow（宽度）
若不给宽度则变得跟内容一样窄
grow按照分配的份数显示宽度
0：logo 1：导航 0：用户头像
• flex-shrink控制如何变瘦
一般写flex-shrink:0防止变瘦，默认是1
• flex-basis控制基准宽度
默认是auto
• 缩写
flex:flex-grow flex-shrink flex-basis
（flex：1 1；）
用空格隔开
• align-self定制align-item
控制单个元素的属性，可以覆盖align-item的样式
flex-start,flex-end

重点
• 记主这些代码
display:flex
flex-direction:row/column
flex-wrap:wrap
just-content:center/space-between
align-item:center
工作中基本只用这些
• Note
justify-content:space-between;
写导航栏时可以替换成margin-left:auto;(需要的标签里)
图片没有居中，在父元素里加display: flex;+align-items:center;

• 实践
用flex做两栏布局（如顶部条）
用flex做三栏布局（如内容区）
用flex做四栏布局（如导航）
用flex做平均布局（如产品展示区）
○ 负margin

• 经验
永远不要把width和height写死，除非特殊说明
○ 写死
width:100px;
○ 不写死
width:50%;
max-width:100px;
width:30vw;
min-width:80%;
特点：不使用px。或者加min max前缀
用min max
flex可以基本满足所有需求
flex和margin-xxx:auto配合有意外的效果

PS:感觉多做几遍青蛙游戏记的更快