Responsive web - Flexbox

Posted by Yuankun Li on 2019-10-15

基础教程:

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

Flex Basis 具体的含义:

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:



show git comment