flex 彈性布局很好用，解決了我的排版問題，下面記錄下我使用flex 彈性布局解決的一些常見問題，以供以後查閱！
（一）基本用法
display
: flex;
flex-direction
: row;
justify-content
: center;
align-items
: center;
分布方向，有兩個值：
2、justify-content
分布樣式，常見值有：
3、align-items
分布方向的反方向內部元素樣式。比如：
情況一：
display
: flex;
flex-direction
: row;
align-items
: center;
情況二：
display
: flex;
flex-direction
: column;
align-items
: center;
（二）靈活用法–元素居中
這裡以讓元素居中為例進行講解。比如我需要讓乙個元素不論怎樣都居中，那麼我們就可以讓這個元素被乙個包裹，然後設定彈性布局：
案例，讓我愛我家四個文字水平、上下居中：
class
="parent"
>
>
我愛我家text
>
div>
display
: flex;
flex-direction
: row;
justify-content
: center;
align-items
: center;
display
: flex;
flex-direction
: column;
justify-content
: center;
align-items
: center;
Flex 輕鬆實現彈性布局
body 一 設定了 body 的展示方式，用flex布局。二 flex box 有上下和左右兩種排列的方向。這裡用左右，設定為 row 橫向 也可以設定為 row reverse 即倒敘排列。三 flex wrap 設定為wrap，為自動換行。comic 一 flex 包含了三個引數 1 flex...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...