我的网站

欢迎来到苏月晟的博客

Sans la liberté de blamer, il n'est point d'éloge flatteur || 若批评不自由,则赞美无意义。
扩大
缩小

css 布局 flex

cursor

设置鼠标放上去后的形状

visability

设置是否可见

flex

详见这篇文章https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox

设置方法

dsplay: flex

flex 模型


方向

flex-direction: column //设置为列布局
flex-direction: row    //设置为行布局

换行

flex-wrap: wrap

设置每项的宽度

flex: 200px;

在这里插入图片描述
flex 动态尺寸

如果一个div里有三个article,且已经设置了div的display: flex。这时三个arti是并排的,且宽度是相等的。

如果进行以下设置

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

则三个宽度比是1:1:2。

如果

article {
  flex: 1 200px;
}

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

则每个flex的宽度最小是200px

水平和垂直对齐

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

align-items说的是div中的元素沿交叉线排列。

justify-content说的是沿主线排列。

在这里插入图片描述
在线试align-items的几个选项

align-items的几个选项分别是

  • flex-start
  • flex-end
  • stretch 默认值 高度和父元素一样
  • center


justify-content的几个选项

  • flex-start
  • flex-end
  • space-round 沿主线均匀排列,两头有空白
  • space-between 沿主线均匀排列,两头没有空白

flex 项排序

在这里插入图片描述

posted on 2019-09-30 13:37  sogeisetsu  阅读(97)  评论(0编辑  收藏

导航