基本概念
main axis
水平的主轴
cross axis
垂直的交叉轴
main start
主轴的开始位置
main end
主轴的结束位置
cross start
交叉轴的开始位置
cross end
交叉轴的结束位置
main size
单个项目占据的主轴空间
cross size
单个项目占据的交叉轴空间
flex布局属性
flex-direction
主轴方向(项目的排列方向)
- []行左=>右(默认值)
- [] row-reverse right =>左
- [] column上=>下
- [] column-reverse下=>上
flex-wrap
换行(排列不下,如何换行)
- [] nowrap不换行(默认值)
- []换换行=>第一行在上方
- [] wrap-reverse dumpquen =>第一行在下方
flex-flow
flex-direction
状语从句:属性flex-wrap
属性的简写形式,默认值为row nowrap
。
justify-content
在项目主轴上的对齐方式
- [] flex-start 左对齐(默认值)
- [] flex-end 右对齐
- [] 中 居居
- [] space-between 两端对其,间隔相等
- [] space-around 平均分布,两侧间隔相等
align-item
在项目交叉轴上的对齐方式
- [] flex-start 顶对齐
- [] flex-end 底对齐
- [] center 居中对齐
- [] baseline 基于第一行的文字基线对齐
- [] stretch 如果项目没有设置高度,将占满整个屏幕对齐(默认值)
align-content
基于交叉轴的多行对齐(只有一行不会起作用)
- [] flex-start
- [] flex-end
- [ ] center
- [ ] space-between
- [ ] space-around
- [ ] stretch
flex元素属性
order
定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow
定义项目的放大比例,默认为
0
,即如果存在剩余空间,也不放大。(设置了非零的项会按比例均分剩余空间)
flex-shrink
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果一个项目的
flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
flex-basis
以设为跟
width
或height
属性一样的值(比如350px),则项目将占据固定空间。
flex
flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。该属性有两个快捷值:
auto
(1 1 auto
) 和 none (0 0 auto
)。
align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖
align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
flex实战
移动端优先、响应式网站
HTML
<!--
/**
* _ooOoo_
* o8888888o
* 88" . "88
* (| -_- |)
* O\ = /O
* ____/`---'\____
* . ' \\| |// `.
* / \\||| : |||// \
* / _||||| -:- |||||- \
* | | \\\ - /// | |
* | \_| ''\---/'' | |
* \ .-\__ `-` ___/-. /
* ___`. .' /--.--\ `. . __
* ."" '< `.___\_<|>_/___.' >'"".
* | | : `- \`.;`\ _ /`;.`/ - ` : | |
* \ \ `-. \_ __\ /__ _/ .-` / /
* ======`-.____`-.___\_____/___.-`____.-'======
* `=---='
*
* .............................................
* 佛祖保佑 永无BUG
*/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Flex Learning
</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 盒子 -->
<div class="box">
<!-- header -->
<header id="header" class="">
This is header of top!
</header><!-- /header -->
<article>
<p>
坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..
</p>
</article>
<!-- 导航 -->
<nav>
导航
</nav>
<!-- 侧边栏 -->
<aside>
侧边栏
</aside>
<!-- footer -->
<footer>
This is footer of bottom!
</footer>
</div>
<script src="./js/index.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
}
header, nav, article, aside, footer {
box-sizing: border-box;
}
header {
border: 1px solid red;
}
nav {
border: 1px solid orange;
}
article {
border: 1px solid #e5e5e5;
}
aside {
border: 1px solid #000;
}
footer {
border: 1px solid blue;
}
/* 启动flex模式,主轴按行排列 换行 */
.box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box > * {
padding: 10px;
flex: 1 100%;
}
/* 媒体查询 将nav与aside放在同一行 and后必须有空格 */
@media all and (min-width: 600px) {
.box nav { flex: 1 auto; }
.box aside { flex: 1 auto; }
}
/* 媒体查询 将nav与aside放在article两侧 */
@media all and (min-width: 1000px) {
.box nav { order: 1; }
.box article { order: 2; flex: 3 0%; }
.box aside { order: 3; }
.box footer { order: 4; }
}