前言
在现代网页设计中，CSS Flexbox 布局为开发者提供了一种强大而灵活的方式来控制元素的排列和对齐。Flexbox 特别适合用于构建响应式布局，使得元素在不同屏幕尺寸下都能保持良好的显示效果。本文将深入探讨 Flexbox 的基本概念以及相关属性，包括 flex-direction、flex-wrap、justify-content 等。通过具体的代码示例，您将学习如何利用这些属性来精确控制容器内项目的排列方式。
flex布局
<template> <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <!-- order 越小 排在 越前面 默认值为1 --> <div class="box" style="order: -1;">4</div> </div> </template> <script> export default { name: 'app', data() { return { } } } </script> <style scoped> .container { margin-left: 100px; margin-top: 200px; width: 600px; border: 1px solid black; height: 300px; display: flex; /* flex-direction 和 flex-wrap 的合并 复合属性 */ /* flex-flow: column wrap; */ /* align-content 和align-items 的区别 align-items 适用于 单行 有上对齐 居中 和下对齐 align-conten 可以设置很多属性 eg： space-between */ /* 这个设置 的是 整个单行 */ /* align-items: flex-end; */ /* justify-content: ; */ /* justify-content: space-around; */ /* 放在末尾的位置 */ /* justify-content: flex-end; */ /* 满了（位置不够）之后会换行 设置nowarp 则 不换行 */ /* flex-wrap: wrap; */ /* 反转显示方向 */ /* flex-direction: row-reverse; */ /* 超出屏幕滚动 */ /* overflow: scroll; &::-webkit-scrollbar { display: none; } */ .box { /* 放在子类使用 设置的值 为上中下*/ /* align-self: flex-end; */ width: 100px; height: 100px; background-color: aqua; } } </style>
flex2
nowrap 默认值 不 换行
.func_btn { margin-top: 20px; display: flex; flex-direction: row; justify-content: flex-end; }
flex-direction flex-wrap flex-flow justify-content // 左右 align-items align-content align-items（定义项目在竖直方向上对齐方式） // 上下
//父级 .xya_strip{ justify-content: space-between; padding: 0rpx 30rpx; } //子级 .xya_strip view{ width: 100% !important; } .status-boxes{ display: flex; justify-content: space-between; }
/* 对齐方式 */ justify-content: center; /* 居中排列 */ justify-content: start; /* 从行首开始排列 */ justify-content: end; /* 从行尾开始排列 */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end; /* 从行尾位置开始排列 */ justify-content: left; /* 一个挨一个在对齐容器得左边缘 */ justify-content: right; /* 元素以容器右边缘为基准，一个挨着一个对齐, */ /* 基线对齐 */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; /* 分配弹性元素方式 */ justify-content: space-between; /* 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点 */ justify-content: space-around; /* 均匀排列每个元素 每个元素周围分配相同的空间 */ justify-content: space-evenly; /* 均匀排列每个元素 每个元素之间的间隔相等 */ justify-content: stretch; /* 均匀排列每个元素 'auto'-sized 的元素会被拉伸以适应容器的大小 */ /* 溢出对齐方式 */ justify-content: safe center; justify-content: unsafe center; /* 全局值 */ justify-content: inherit; justify-content: initial; justify-content: unset;
<template> <div id="app"> <!-- <router-view /> --> <div class="main"> <div class="box1" style="background:red;height:50px;width:50px;"> box1 </div> <div class="box2" style="background:blue;height:50px;width:50px;"> box1 </div> <div class="box3" style="background:green;height:50px;width:50px;"> box1 </div> <div class="box4" style="background:yellow;height:50px;width:50px;"> box1 </div> </div> </div> </template> <script> export default { name: "App" }; </script> <style scope lang="scss"> .main { width: 190px; // 如果给出高度 溢出去的 会 和第一行有间距 height: 210px; border: 1px solid black; display: flex; flex-wrap: wrap; flex-shrink: 0; } html, body, #app { margin: 0; padding: 0; height: 100%; } </style>
align-items
定义方块放的位置
<style> .box00 { height: 400px; width: 400px; border: 4px solid #000; display: flex; /* align-items: center; */ align-items: end; } .box1 { height: 100px; width: 100px; border: 1px solid #000; flex: 1; } .box2 { height: 100px; width: 100px; border: 1px solid #000; flex: 1; } </style> </head> <body> <div class="box00"> <div class="box1">box1</div> <div class="box2">box2</div> </div> </body>
box-sizing
默认值，标准盒子模型。[width](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width) 与 [height](https://developer.mozilla.org/zh-CN/docs/Web/CSS/height) 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说， 在浏览器中的渲染的实际宽度将是 370px。.box {width: 350px; border: 10px solid black;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { /* 会向外面借大小 默认 */ box-sizing: content-box; /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */ } .border-box { /* 规定了 大小 就不会改变了 宽高 固定 只会 向里面 借 大小 */ box-sizing: border-box; /* Total width: 160px Total height: 80px Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ } </style> </head> <body> <div class="content-box">Content box</div> <br> <div class="border-box">Border box</div> </body> </html>
