常常我們布局會使用到flex，但布局中存在一些問題，比如無法設(shè)置寬度

display: flex;
flex-wrap: nowrap;
我通過設(shè)置元素不換行，然后子元素分別設(shè)置了50px的寬度和高度，但是無法生效

原因

• 設(shè)置display:flex后，子元素在沒有超過指定寬度的時候，子元素的寬度是有效的，但超過指定寬度 的話，子元素的寬度就無效了,子元素不能直接設(shè)置width: 50px；
• flex-shrink 屬性指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。0代表不會收縮

要通過如下方式設(shè)置：

• 1 子元素設(shè)置寬度

flex: 0 0 50px;

• 2 子元素使用min-width代替width
• 3 子元素設(shè)置

flex-shrink:0

flex 參數(shù)

flex-grow 一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行擴展的量。
flex-shrink 一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行收縮的量。
flex-basis 項目的長度。合法值："auto"、"inherit" 或一個后跟 "%"、"px"、"em" 或任何其他長度單位的數(shù)字。