【後转前要多久】# Day13 CSS - Display: Flex (vs Float)

当没有任何CSS时，
HTML预设显示区块元素(block)方式都是 往下一行一行(row)长

HTML

...
p*3>lorem20(按tab)
...

那我想要排版成横式，希望他往右一列一列(col)长该如何？

display: flex 柔性伸缩

只要在外包一层容器，并且在容器上加上display: flex就能轻松达成了~

往右一列一列(col)长

HTML

...
<div class="container">
    p*3>lorem20(按tab)
</div>
...

CSS

.container{
    display: flex;
}

flex中能包另一个flex (ex:先在外面制造并排效果、再做里面与其他元素垂直排版)
flex就是如此的神奇，能迅速切出想要的版面。

主轴

display:flex

Display预设并排(先往右长)，按照比例做伸缩
长宽设超过也不会超出父层
如果没有特别设定子元素的长宽，内层子元素预设都是等高等宽(取可以到达的最长、最高)

felx-direction 更改主轴方向、资料流向:左到右(预设)、右到左、上到下(像区块block元素)、下到上

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

justify-content 主轴对准校准的位置: 起点(预设)、终点、中央、左右留小白、左右中留白、只有元素间留白

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;

flex-wrap 满版的话(超出父元素范围)会自动换行

flex-wrap: wrap;
flex-wrap: nowrap;

交错轴 与主轴垂直的另一个轴

align-items 交错轴对准校准的位置: 起点、终点、延伸

align-items: start;
align-items: end;
align-items: stretch;

align-content 在多行时才看得出效果

align-content: space-around;

各式Flex Box示意图

float 是属於比较旧式、传统的写法，
如今display: flex 能做到float大多数的排版且可以灵活运用
除非是很想学float到心痒难耐的地步、想知道flaot到底在float什麽的人以外，
否则可以直接跳过这个章节、进入下一页。

float 浮动效果

就趁我还没失忆前整理一下笔记吧(既然都学了)

float 会让元素漂浮起来，依照父元素最大宽高去做排版，
如果同一行内容容纳不下时才会做换行，所以适合做文绕图的版型。
（其实float与display: inline-block有点类似）

float有两种飘法，看要往左上方飘、还是往右上方飘
float是一个属性，**用法不是display: float**哦

float: none;
float: left;
float: right;

简易文绕图方式，在图片上挂float属性

HTML

...
<img src="https://picsum.photos/300/200" alt="">
<p>lorem300(按tab)</p>
...

CSS

img{
    float: right;
}

只要不挡住Normal flow(可显示对象在排列时所占用的位置)，能做到无视block区块。

清除浮动效果 clear

float效果并不会被清除，直到遇到具有clear属性的元素之後，会向下清除浮动效果。

清除左侧浮动、清除右侧浮动、清除两侧浮动

clear: left;
clear: right;
clear: both;

原本的float会让这段HTML变成这样

...
<img src="https://picsum.photos/300/200" alt="">
<p> 段落文字 Lorem ipsum dolor sit amet.</p>
<p> 段落文字 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, quibusdam.</p>
<h1>标题</h1>
<p> 段落文字 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
...

浮动效果连带影响到<h1>。
如果想从<h1>开始独占一行、不要再乱飘浮乱动了，想要硬一点
就加上clear来清除浮动效果
因为float right浮右侧，就清除右侧浮动效果

img{
    float: right;
}

h1{
    clear: right;
}

clear清除浮动後的效果

通常会如何去除浮动？

通常会把clear这项属性放在哪里？
以下是两种关於clearfix的常见作法

清除浮动方法1

创造一个clear属性的css class，需要清除浮动时就用他！
(这样子的作法相对简单，但也相对肮脏，因为会添加多余的元素进HTML之中)

...
<img src="https://picsum.photos/300/200" alt="">
<p> 段落文字 Lorem ipsum dolor sit amet.</p>
<p> 段落文字 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, quibusdam.</p>
<div class="clearfix"></div>
<h1>标题</h1>
<p> 段落文字 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
...

CSS

.clearfix{
clear: both;
}

清除浮动方法2

在用到float元素的父层中额外加上下面的css

.clearfix::after{
    content: "";
    clear: both;
    display:table;
}