> ## :-: [伸縮盒子](http://css.doyoe.com/properties/flex/index.htm)
```
.wrap {
width: 400px;
height: 300px;
border: 1px solid red;
/* --------------- 作用在父級上的 --------------- */
/* 父級改變為伸縮盒子
(特點:主軸x/y 的子級不會溢出父級盒子,即使內容原本是超出父級的,也會被擠壓排列) */
display: flex;
/* 配合使用,改變排列的 主軸方向 (水平/垂直)
flex-direction
水平排列 默認值 -- → row 行
水平 相反 -------- ← row-reverse ( reverse 意思:背面;相反;倒退)
垂直排列 --------- ↓ column 列
垂直 相反 -------- ↑ column-reverse */
flex-direction: row;
/* flex-wrap 設置盒子中的子級是否換行,
不允許換行 -- nowrap 默認值,超出父級的子級box會 被擠壓(寬度變小)
允許換行 -- wrap,效果類似于float: left;超出父級的子級box會 折行展示 */
flex-wrap: wrap;
/* justify-content 改變基于主軸的 對齊方式
正向對齊 默認值 flex-start (左\上對齊)
反向對齊 ------ flex-end (與flex-start相反)
居中對齊 ------ center
分散對齊 ------ space-between (會自適應 留出間距)
類似于分散對齊(不好描述) ------ space-around */
justify-content: space-around;
/* align-items 基于交叉方向的對齊方式 控制單行的
劇中對齊 ------ center
正向對齊 ------ flex-start
反向對齊 ------ flex-end */
align-items: center;
/* align-content 基于交叉抽多行排列位置的分配、 控制多行的
劇中對齊 ------ center
正向對齊 ------ flex-start
反向對齊 ------ flex-end */
align-content: center;
/* 單行 在父級設置下面兩個屬性則為 水平垂直劇中
justify-content: center; align-items: center; */
/* 多行 在父級設置下面兩個屬性則為 水平垂直劇中
justify-content: center; align-content: center; */
}
.wrap .box {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
/* --------------- 作用在子級上的 --------------- */
}
.wrap .box:nth-of-type(3) {
/* --------------- 作用在子級上的 --------------- */
/* 類似于z-index,改變排序的權重 (原本在第3個的元素,可以讓它排到頭/尾部)
默認值為0 填負數時 元素靠前排列
填正數時 元素靠后排列 */
order: -1;
/* 在交叉軸中,打破父級給于的排列方式,子級按自己的方式排列 (子級的權重高于父級)
在多行中不起作用 即父級為 align-content: center;
默認值 auto 聽父級的、、
中 -- center
正 -- flex-start
反 -- flex-end */
align-self: flex-end;
}
```
> ## :-: [彈性盒子](http://css.doyoe.com/properties/flex/flex.htm)
```
.wrap {
width: 400px;
height: 300px;
border: 1px solid red;
/* --------------- 作用在父級上的 --------------- */
/* 父級改變為伸縮盒子
(特點:主軸x/y 的子級不會溢出父級盒子,即使內容原本是超出父級的,也會被擠壓排列) */
display: flex;
/* 配合使用,改變排列的 主軸方向 (水平/垂直)
flex-direction
水平排列 默認值 -- → row 行
水平 相反 -------- ← row-reverse ( reverse 意思:背面;相反;倒退)
垂直排列 --------- ↓ column 列
垂直 相反 -------- ↑ column-reverse */
/* 主軸為水平排列 */
flex-direction: row;
flex-wrap: nowrap;
}
.wrap .box {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
/* --------------- 作用在子級上的 --------------- */
/* flex-grow 伸縮,按比例平均分配填滿主軸的內容區、、(不好描述)
假設父級盒子為400,400 子級為方塊100,100 此時還多出100的區域,
這時當flex-grow: 1;子級的寬度就會變成125px。平均劃分,占滿主軸的內容區
元素 1、2、3 分別設置flex-grow: 1; 2 ;3; 即為按 1:2:3 比例占滿主軸的內容區
默認值為0 */
flex-grow: 1;
/* flex-basis 類似于width,但它的權重高于width,會破壞原本的寬度 (就當它是改變元素寬度的) */
flex-basis: 30px;
/* flex-shrink 與flex-grow類似,是基于內容區(content)的真實寬度來參與計算的 */
flex-shrink: 1;
}
```
> ## :-: Demo - 實例
```
<!-- 不管父級大小如何變化子級始終保持 水平垂直居中 -->
<div class="wrap">
<div class="box">1</div>
</div>
/* ———————————————————————————————— */
.wrap {
resize: both;
overflow: hidden;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}
.wrap .box {
width: 100px;
height: 100px;
border: 1px solid red;
}
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request