flex 布局

Flex之前我們用什么布局
主要使用
1、normal flow (正常流，也叫文檔流)
2、float + clear
3、position relative + absolute
4、display inline-block
5、負 margin

flex
一種新的布局方式---Flex 布局
1、塊級布局側重垂直方向、行內(nèi)布局側重水平方向，flex布局是與方向無關的。
2、flex 布局可以實現(xiàn)空間自動分配、自動對齊 (flexible:彈性、靈活)
3、flex 適用于簡單的線性布局，更復雜的布局要交給 grid 布局

flex 布局 代碼例子


clipboard1.png

基本概念圖


clipboard2.png

flex container 的屬性


clipboard3.png

flex-wrap

clipboard4.png

flex-flow


clipboard5.png

justify-content:space-between

clipboard6.png

align-items


clipboard7.png

align-items: stretch


clipboard8.png

align-content


clipboard9.png

flex item 的屬性


clipboard10.png

flex-shrink


clipboard11.png
clipboard12.png

align-self

clipboard13.png

手機頁面布局
clipboard14.png

1、手機頁面布局
代碼：http://js.jirengu.com/cagucuhasa/4/edit
頁面：http://js.jirengu.com/cagucuhasa/4

2、產(chǎn)品列表
代碼：http://js.jirengu.com/kifopuceqi/3/edit
頁面：http://js.jirengu.com/kifopuceqi

3、PC頁面布局
代碼：http://js.jirengu.com/riqakunuhi/2/edit
頁面：http://js.jirengu.com/riqakunuhi

4、完美居中
代碼：http://js.jirengu.com/modosutava/2/edit
頁面：http://js.jirengu.com/modosutava

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 一、基本概念 理解基本概念Flex 布局(彈性布局)，是一種用于在頁面上布置元素的布局模式，使得當頁面布局必須適應...
    微風玉米閱讀 674評論 0贊 2
  • 在flex之前用 flex （flexible:彈性，靈活） 1.與方向無關2.空間自動分配，自動對齊3.簡單的線...
    yytyff閱讀 297評論 0贊 0
  • 建議大家看完阮一峰老師的Flex 布局教程：語法篇再看這篇文章；另：本文中的思維導圖使用新建標簽頁的方式打開才能看...
    該帳號已被查封_才怪閱讀 6,015評論 2贊 51
  • 上一篇文章介紹了Flex布局的語法，今天介紹常見布局的Flex寫法。你會看到，不管是什么布局，F(xiàn)lex往往都可以幾...
    君臨天下夜未央閱讀 3,835評論 1贊 12
  • 上一篇文章介紹了Flex布局的語法，今天介紹常見布局的Flex寫法。 你會看到，不管是什么布局，F(xiàn)lex往往都可以...
    老夫的天閱讀 831評論 0贊 10