列对齐(Column Alignment)
描述 (Description)
弹性网格列可以沿父行中的水平轴或垂直轴对齐。
水平对齐
列可以以与段落中对齐的内容相同的方式对齐。
在弹性行中使用.align-[dir]类，您可以根据自己的意愿对齐列。 默认情况下，列与左侧对齐。
align-spaced类用于保持每列之间的空间。
align-justify类将列与左右边缘对齐，列之间有空格。
例子 (Example)
以下示例演示了在Foundation中使用Horizontal alignment -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Foundation Template</title>
<link rel = "stylesheet" href = "css/foundation.css" />
<script src = "js/vendor/jquery.min.js"></script>
<script src = "js/foundation.min.js"></script>
</head>
<body>
<h2>Example of Flex Grid</h2>
<div class = "row">
<div class = "column small-3" style = "background-color:#FF6347;">Left</div>
<div class = "column small-3" style = "background-color:#C0B0F0;">Side</div>
</div>
<h2>Aligned to right</h2>
<div class = "row align-right">
<div class = "column small-4" style = "background-color:#FF6347;">Right</div>
<div class = "column small-4" style = "background-color:#C0B0F0;">Side</div>
</div>
<h2>Aligned in Middle</h2>
<div class = "row align-center">
<div class = "column small-5" style = "background-color:#FF6347;">Aligned in</div>
<div class = "column small-5" style = "background-color:#C0B0F0;">Middle</div>
</div>
<h2>Aligned to the Edges</h2>
<div class = "row align-justify">
<div class = "column small-3" style = "background-color:#FF6347;">Left Edge</div>
<div class = "column small-3" style = "background-color:#C0B0F0;">Right Edge</div>
</div>
<h2>Aligned to Space around</h2>
<div class = "row align-spaced">
<div class = "column small-4" style = "background-color:#FF6347;">Spaces</div>
<div class = "column small-4" style = "background-color:#C0B0F0;">Spaces</div>
</div>
</body>
</html>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
保存上面给出的html代码horizontal_alignment.html文件。
在浏览器中打开此HTML文件，输出显示如下。
垂直对齐
默认情况下，弹性网格与顶部对齐。 您可以使用另一组对齐类更改行为。 在垂直对齐中，可以选择top, middle, bottom和stretch 。
例子 (Example)
以下示例演示了在基础中使用Vertical Alignment -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Foundation Template</title>
<link rel = "stylesheet" href = "css/foundation.css" />
<script src = "js/vendor/jquery.min.js"></script>
<script src = "js/foundation.min.js"></script>
</head>
<body>
<h2>Example of Flex Grid</h2>
<div class = "row align-bottom">
<div class = "columns" style = "background-color:#8BD6EE;">Lorem Ipsum
is simply dummy text of the printing and typesetting industry.
</div>
<div class = "columns" style = "background-color:#7B68EE;">Lorem Ipsum
is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.
</div>
</div>
</body>
</html>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
保存上面给出的html代码vertical_alignment.html文件。
在浏览器中打开此HTML文件，输出显示如下。
