CSS-flex一维原创邦

CSS-flex一维

----html-----
<div class="main">
  <div class="sub">abc</div>
  <div class="sub">abc</div>
  <div class="sub">abc</div>
</div>

----css------

.main {
  display: flex;
}
.sub{
  flex: 1;  /* 这里的 1 是sub分配main里面的剩余空间站的比例 */
}

display: flex
display: inline-flex ; 子元素为flex items, 且子元素像一个inline element.

main axis
main start <------> main end

cross axis
cross start | cross end

flex container > flex items

行还是列 Columns or rows?

flex-direction: ， by default this is set row. left to right( in the case of an English browser)

问题：内容太多导致flex-container被挤爆
flex-wrap: wrap
同时给子元素flex-items增加
flex: 200px;

这样的话flex-items第一行放不下的会换行显示，最后一行也会占满。

shorthand的写法：
You can replace

flex-direction: row;
flex-wrap: wrap;

with

flex-flow: row wrap;

You can specify a minimum size value inside the flex value.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

The basically states "Each flex item will first be given 200px of the available space. After that, the rest of the available space will be shared out according to the proportion units." Try refreshing and you'll see a difference in how the space is shared.

flex: 1 1 200px,简写形式分别代表如下几个写法：

flex-grow:  1/2/3
flex-shrink: 0/0.6/1/2  收缩， flex item 收缩，为0表示和父类一样宽，，1是默认，表示正常， 2表示是正常的一半了 
flex-basis: 200px

We'd advise against using the longhand flex properties unless you really have to . 我们不建议你使用longhand的写法。They lead to a lot of extra code being written, and they can be somewhat confusing.

div {
  display: flex;
  align-items: center; # 垂直居中了
  justify-content: space-around;
}

align-items By default ,the value is stretch,, stretch ,如果父类没有固定高度（cross axis‘s width)，最高的item就是大家的Item高度。如果有，那就父类的高度

align-items 控制flex-items在cross-axis上的位置。

justify-content 控制flex-items在main-axis上的位置。默认值是flex-start, flex-end/ space-around 最左最右少留点白/ space-between 最左最右不留白/ space-evenly 均匀留空/

order：从前到后：所有项flex-items默认的order都是0，值小的先出现，大的后出现。也可以设置负值。先按照值排序，再根据代码里面的顺序。

button:last-child {
  order: -1;
}

阅读量: 537
发布于: 2021-07-30
修改于: 2021-07-30