CSS Tricks for Flexbox

2025年1月31日 | 阅读 9 分钟

Flexbox 的 CSS 技巧对于使用 flexbox 和其他 CSS Flexbox 技巧属性来调整、设计和定位容器至关重要。CSS 技巧属性和多个属性值用于 flexbox 的设计及其数据。我们可以使用 CSS 技巧来为 flexbox 设置对齐方式、位置、间距和其他设计。

以下 CSS 技巧格式用于设计 flexbox。

Flexbox 方向的 CSS 技巧
Flexbox 对齐的 CSS 技巧
Flexbox 外边距的 CSS 技巧

Flex 方向

flex-direction 用于获取 flexbox 内部容器的方向。我们可以根据需要设置容器。

语法

以下语法使用 flexbox 的 CSS 技巧。我们可以将其他 CSS 属性用于 flex-direction。

display: flex;
flex-direction: row | row-reverse | column | column-reverse;

描述

我们可以默认将 display 与 flex 一起用于容器或元素。
Flex 方向使用 CSS 属性，其值包括 row、column 和 reverse。

Flex-direction 示例

以下示例展示了具有 display Flex 属性和值的 flexbox。我们可以调整内容、对齐方式和方向。

示例 1

以下示例展示了 flex-direction 为 row，对齐方式和内容默认位于起始位置。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex*/
.flex-containers {
display: flex;
background-color: navy;
flex-direction: row;
}
.flex-containers > div {
background-color: #f2f2f2;
margin: 10px;
padding: 25px;
font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> <br>
<br>
<div class = "flex-containers">
<div class = "clip"> CSS </div>
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 技巧的 flexbox。

示例 2

以下示例展示了 flex-direction 为 row reverse，内容默认位于起始位置。反向行显示带有水平对齐的从末尾到开头的标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex*/
.flex-containers {
display: flex;
background-color: navy;
flex-direction: row-reverse;
}
.flex-containers > div {
background-color: #f2f2f2;
margin: 10px;
padding: 25px;
font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> <br>
<br>
<div class = "flex-containers">
<div class = "clip"> CSS </div>
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 技巧的 flexbox。

示例 3

以下示例展示了 flex-direction 为 column，对齐方式和内容默认位于起始位置。列显示带有垂直对齐的从开头到末尾的标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex*/
.flex-containers {
display: flex;
background-color: navy;
flex-direction: column;
}
.flex-containers > div {
background-color: #f2f2f2;
margin: 10px;
padding: 10px;
font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> <br>
<br>
<div class = "flex-containers">
<div class = "clip"> CSS </div>
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 技巧的 flexbox。

示例 4

以下示例展示了 flex-direction 为 column reverse，对齐方式默认位于起始位置。反向列显示带有垂直对齐的从末尾到开头的标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex*/
.flex-containers {
display: flex;
background-color: navy;
flex-direction: column-reverse;
}
.flex-containers > div {
background-color: #f2f2f2;
margin: 10px;
padding: 10px;
font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> <br>
<br>
<div class = "flex-containers">
<div class = "clip"> CSS </div>
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 技巧的 flexbox。

Flex 对齐技巧

flex 使用 CSS 技巧或属性来对齐和定位内容。

语法

以下语法使用 flexbox 对齐的 CSS 技巧。

display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
align-self: flex-start | flex-end | center | baseline | stretch;
justify-content: start | end |  center | space-between | space-around | space-evenly;

描述

我们可以默认将 display 与 flex 一起用于容器或元素。
flexbox 对齐方式设置为 start、end、center 和其他 CSS 技巧值。
内容在 flexbox 中使用 "justify-content" 属性设置。

示例

以下示例展示了具有不同值的内容和 flexbox 位置。

示例 1

以下示例展示了 flex-direction 为 row，对齐方式位于末尾，justify-content 显示在末尾位置。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex*/
.flex-containers {
  display: flex;
  background-color: navy;
  flex-direction: row;
  align-self: flex-end;
  justify-content: end;
}
.flex-containers > div {
  background-color: #f2f2f2;
  margin: 10px;
  padding: 25px;
  font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> <br>
<br>
<div class = "flex-containers">
<div class = "clip"> CSS </div> 
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 技巧的 flexbox。

示例 2

flexbox 使用 justify-content 属性将容器显示在中心位置。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex */
.flex-containers {
  display: flex;
  background-color: navy;
  flex-direction: row-reverse;
  align-self: flex-end;
  justify-content: center;
}
.flex-containers > div {
  background-color: #f2f2f2;
  margin: 10px;
  padding: 25px;
  font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> <br>
<br>
<div class = "flex-containers">
<div class = "clip"> CSS </div> 
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 技巧的 flexbox。

示例 3

flexbox 使用 justify-content 属性显示容器，并在标签周围留有空间。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex */
.flex-containers {
  display: flex;
  background-color: navy;
  flex-direction: row;
  align-self: flex-end;
  justify-content: space-around;
}
.flex-containers > div {
  background-color: #f2f2f2;
  margin: 10px;
  padding: 25px;
  font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> <br>
<br>
<div class = "flex-containers">
<div class = "clip"> CSS </div> 
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 技巧的 flexbox。

示例 4

flexbox 使用 justify-content 属性显示容器，并在标签周围留有空间。我们可以将 display 与属性的 inline flex 值一起使用。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex */
.flex-containers {
  display: inline-flex;
  background-color: navy;
  flex-direction: row;
  align-self: flex-end;
  justify-content: space-around;
}
.flex-containers > div {
  background-color: #f2f2f2;
  margin: 10px;
  padding: 25px;
  font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> <br>
<br>
<div class = "flex-containers">
<div class = "clip"> CSS </div> 
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 技巧的 flexbox。

Flexbox 外边距的 CSS 技巧

我们可以使用 CSS 属性为 Flexbox 及其子盒子设置外边距和内边距。我们可以为显示框设置基本的 flexbox CSS 技巧及其值。之后，添加 CSS 属性来设置 flexbox 子元素的外边距。

语法

以下语法用于 flexbox 的子元素来设置外边距。

<style>
Parent_element{
Display: flex;
}
Child_element{
margin: CSS_VALUE;
CSS_property : value;
}
</style>

示例

以下示例使用 CSS 技巧和子元素设置外边距和设计。

示例 1

以下示例设置 flexbox 容器的第一个元素的外边距和内边距。我们可以设置外边距值、字体大小和背景颜色以匹配所需值。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex */
.flex-containers {
  display: flex;
  background-color: navy;
}
.flex-containers > div:first-child {
  background-color: red;
  margin: 20px;
  padding: 30px;
  font-size: 25px;
}
.flex-containers > div {
  background-color: #f2f2f2;
  margin: 10px;
  padding: 25px;
  font-size: 20px;
}
.main_div {
background-color: #F4F2F2;
height:280px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> 
<br>
<p> The first child of flexbox set with different CSS tricks </p>
<div class = "flex-containers">
<div class = "clip"> CSS </div> 
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</body>
</html>

输出

输出显示了第一个元素的外边距。

示例 2

以下示例设置 flexbox 容器的第三个元素的外边距和内边距。我们可以设置 margin-auto 的值，并使用不同的背景颜色。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex */
.flex-containers {
  display: flex;
  background-color: navy;
}
.flex-containers > div:last-child {
  background-color: yellow;
  margin-left: auto;
  padding: 10px;
  font-size: 25px;
}
.flex-containers > div {
  background-color: #f2f2f2;
  margin: 10px;
  padding: 25px;
  font-size: 20px;
  
}
.main_div {
background-color: #F4F2F2;
height:280px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> 
<br>
<p> the last child of flexbox set with different CSS tricks </p>
<div class = "flex-containers">
<div class = "clip"> CSS </div> 
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
</div>
</body>
</html>

输出

输出显示了第一个元素的外边距。

示例 3

以下示例设置 flexbox 容器的最后一个元素的外边距和内边距。

<!DOCTYPE html>
<html>
<head>
<title> CSS Tricks for Flexbox </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show CSS trick for flex */
.flex-containers {
  display: flex;
  background-color: navy;
}
.flex-containers > .clip3{
  background-color: orange;
  margin: auto;
  padding: 10px;
  font-size: 25px;
}
.flex-containers > div {
  background-color: #f2f2f2;
  margin: 10px;
  padding: 25px;
  font-size: 20px;
  
}
.main_div {
background-color: #F4F2F2;
height:280px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS Tricks for Flexbox </h4>
<b> We can set the flexbox with the different CSS properties </b> 
<br>
<p> the last child of flexbox set with different CSS tricks </p>
<div class = "flex-containers">
<div class = "clip"> CSS </div> 
<div class = "clip2"> Flex </div>
<div class = "clip3"> Tricks </div>
<div class = "clip4"> Study </div>
</div>
</body>
</html>

输出

输出显示了第一个元素的外边距。

结论

CSS 技巧使用属性及其值来设置 flexbox 设计。我们可以使用多种设计和技巧来获取所需格式的 CSS flexbox。

下一主题CSS 换行

CSS Tricks for Flexbox

Flex 方向

Flex-direction 示例

Flex 对齐技巧

示例

Flexbox 外边距的 CSS 技巧

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Tricks for Flexbox

Flex 方向

Flex-direction 示例

Flex 对齐技巧

示例

Flexbox 外边距的 CSS 技巧

示例

结论

相关帖子

CSS Border Bottom

CSS Class

CSS Viewer

Hoverable CSS

如何旋转 CSS 中的图片

CSS Progress Bars

Responsive Image Gallery in HTML CSS

Selection CSS

Responsive Image Gallery HTML CSS

CSS Remove Border

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器