基础教程：

• 官方文档 A Complete Guide to Flexbox
• 阮一峰 Flex 布局教程：语法篇

但是看完还是有些不懂的地方：

Flex Basis 具体的含义:

• flex-basis MDN
  以及和width的区别：
• Flex Basis与Width的区别
• The Difference Between Width and Flex Basis

flex-grow、flex-shrink、flex-basis 是怎么此消彼长的

如果分配剩余空间？

• 深入理解css3中的flex-grow、flex-shrink、flex-basis

小实践：

Code Pen - Flexbox Form:
Flexbox Form
有个困惑， 比如.wrapper 的width只有比如100px; 但是lable/span又不想换行，这时lable的flex-grow:1,.date的flex-grow:3. 也就是比例是1：3，lable就会被截断。 当然如果flex-grow:1都为1，input和lable同比例缩小，会解决。
但是在lable不长的情况下，不想让lable 和 input 部分的比例为1：1.

当然通过 media query 来实现修改flex的值，但是如果我想以.wrapper的宽度来修改flex-grow的值要怎么做呢？或者以lable的长度来修改.date的flex-grow的值？（lable长的时候，lable: .date = 1：1，lable短的时候，1：3）?

1
2
3
4
5
6
7
8
9
10

@media screen and (min-width: 768px) {
   	.form-row > .date {
    	flex: 3;  
   }
  }
 @media screen and (min-width: 992px) {
   	.form-row > .date {
    	flex: 4;  
   }
  }

1
2
3
4
5
6
7
8
9
10
11
12

.form-row > span {
  display: inline-block;
  padding: .5em 1em .5em 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}
.form-row > .date {
  display: flex;
  align-items: baseline;
  flex: 3;
}

Reference Links:

• 官方文档 A Complete Guide to Flexbox
• 阮一峰 Flex 布局教程：语法篇
• How to Align Form Elements with Flexbox
• Flex Basis与Width的区别
• The Difference Between Width and Flex Basis

Donate

• ← Previous Post
• Next Post →