flex布局学习

最新推荐文章于 2024-08-10 18:05:27 发布

cjn1997

最新推荐文章于 2024-08-10 18:05:27 发布

阅读量53

点赞数

分类专栏： css学习笔记文章标签： css

本文链接：https://blog.csdn.net/cjn1997/article/details/113564916

版权

css学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考博客

语法篇：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

实例篇：

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

一、flex布局的语法概览

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex容器有两条轴，主轴和交叉轴，二者垂直相交。

1、flex容器的属性

flex-direction：主轴方向；
flex-wrap：确定如何换行；
flex-flow：flex-direction和flex-wrap的缩写；
justify-content：项目在主轴的对齐方式；
align-items：项目在交叉轴的对齐方式；
align-content：项目在多条轴线的对齐方式；

2、flex项目的属性

order：项目的排列顺序，数值越小，排列越靠前，默认值为0，可以负数；
flex-grow：定义项目的放大比例，默认是0，如果存在剩余空间也不放大；
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）；
flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto；
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性；

二、实例

（1）固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

<body class="Site">
  <header>header</header>
  <main class="Site-content">main</main>
  <footer>xxxxxxfooterxxxxx</footer>
</body>

.Site {
  display: flex;
  min-height: 100vh; //设置项目的最小高度
  flex-direction: column;
}

.Site-content {
  flex: 1;  //设置中间的main可以扩大1倍
}
header{
  border: 1px solid black;
}
main{
  border: 1px solid black;
}

cjn1997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局学习

参考博客语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html一、flex布局的语法概览Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。flex容器有两条轴，主轴和交叉轴，二者垂直相交。1、flex容器的属性flex-direction：
复制链接

扫一扫

专栏目录