flex 布局语法-入门笔记

最新推荐文章于 2023-08-30 00:42:55 发布

蜗牛前端

最新推荐文章于 2023-08-30 00:42:55 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_21113235/article/details/82776076

css 专栏收录该内容

3 篇文章

订阅专栏

本文深入讲解了Flex布局的优势与应用，包括如何在任何容器中指定Flex布局，行内元素使用Flex布局的方法，以及在Webkit内核浏览器中兼容性处理。详细解析了容器的六大属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，同时提供了子元素单独设置样式的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

阮一峰flex 布局学习总结

原课件点击这里 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

优点/概念：

优点为盒模型提供最大的灵活，任何容器都可指定。
采用flex布局的父元素（容器），所有子元素自动成为flex成员：
容器内默认存在水平，垂直两个轴
任何一个容器都可以指定为 Flex 布局。
```
.box{
  display: flex;
}
```
行内元素也可以使用 Flex 布局。
```
.box{
  display: inline-flex;
}
```
Webkit 内核的浏览器，必须加上-webkit前缀。
```
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
```

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

容器的属性

以下6个属性设置在容器上

flex-direction 元素对齐方向水平还是垂直
flex-wrap 是否换行，以及换行方式
flex-flow 以上两种属性的简写：默认值为row nowrap
justify-content 水平方向上对齐方式
align-items 行元素的对齐方式
align-content 垂直方向上对齐方式

如需单独设置其中一个子元素：

1、通过css子元素筛选器

 .pip:nth-of-type(2) {
      align-self: center;
}

例子：

<div class="third-face">
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
</div>

.third-face {
  display: flex;
  justify-content: space-between;
}
  
.third-face .pip:nth-of-type(2) {
  align-self: center;
}

.third-face .pip:nth-of-type(3) {
  align-self: flex-end;
}

效果：