彈性布局的屬性

[TOC] 案例地址 http://www.runoob.com/w3cnote/flex-grammar.html ####屬性及作用 1、 display:flex; 彈性布局， 父級
2、 flex-deriction 方向， 父級
3、 flex-wrap 換行， 父級
4、 justify-content 水平對齊方式，寫在 父級
5、 align-items 垂直對齊方式，寫在 父級
6、 align-content 垂直對齊方式，用於修改 flex-wrap 屬性的行為(如果不換行，則無效),寫在 父級
7、 align-self 垂直對齊方式，寫在 子級
8、 order 排序， 子級
9、 flex 分配空間,如果寫的全是數字和字母不會自動斷行，會導致占比比較多， 子級
>慎重使用
10、 flex-basis 定義彈性盒子元素的默認基准值，寫在 子級
11、 flex-grow 定義彈性盒子元素的擴展比率,寫在 子級
12、 flex-shrink 定義彈性盒子元素的默認基准值，寫在 子級

語法

1、display:flex;

2、flex-direction: row | row-reverse | column | column-reverse

3、flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

4、justify-content: flex-start | flex-end | center | space-between | space-around

5、align-items: flex-start | flex-end | center | baseline | stretch

6、align-content: flex-start | flex-end | center | space-between | space-around | stretch

7、align-self: auto | flex-start | flex-end | center | baseline | stretch

8、order: number

特別說明

1、 flex布局，子級元素如果沒有給高度，子級會自動繼承父級的高度。別的布局不會,設置了align-slef也不會。無論什么布局子級的div的寬度都可以繼承父級div的寬度。
2、 彈性布局，會保留margin和padding的寬度。子元素別的寬度會根據比例縮放。
3、 在沒有設置子元素寬度的情況下，默認是80.138px;
4、 在沒有設置子元素寬度和高度的情況下，橫向排列最小的高度是20.8，縱向排列最小的寬度是34.3;

浮動布局

字母和數字都會不自動換行

<div class="pd1">
    <div class="d1">451111111111111111111111111111你好3你好你好你好你好你好你好你好你好你好你好1111111111111111111111111111我1111111111111111111111111111aaaaa你好</div>
    <div class="d2">222222222222222222你好你好你好你好你好你好你好你好你好你好你好你好你好你好22222</div>    
</div>

.d1,.d2{
  width: 100px; 
  float: left;
}
.d1{
  background: pink;
}
.d2{
  background: green;
}

效果圖:

解決辦法：

 word-wrap: break-word;
/*  此值用來強制換行，內容將在邊界內換行，中文沒有任何問題，英文語句也沒問題。但是對於長串的英文，就不起作用。 */
 word-break: break-all; 
 /* 是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。 */