当前位置：网站首页>Align content attribute in flex layout

Align content attribute in flex layout

2022-06-28 13:06:00 【HHppGo】

`align-content` Conditions under which attributes work :

Set the free box attribute on the parent element display:flex;
And set the arrangement mode as horizontal arrangement flex-direction:row; （ The default value is ）
Set newline ,flex-wrap:wrap;

Demo Code ：

<!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>align-content attribute </title>
    <style> .box {
       width: 200px; display: flex; /* flex-direction: row; flex-wrap: wrap; */ flex-flow: row wrap; /*  The default value is :stretch align-content: The available values are  flex-start, flex-end,center,space-around,space-between,stretch */ align-content: stretch; height: 300px; background-color: grey; } .box1 {
       height: 30px; width: 100px; background-color: orange; } .box2 {
       height: 50px; width: 200px; background-color: red; } .box3 {
       height: 30px; width: 100px; background-color: #08a9b5; } </style>
</head>

<body>
    <div class="box">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>

</html>

effect ：

align-content: stretch;

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-around;

align-content:space-between;

Reference article ：https://blog.csdn.net/qq_40323256/article/details/102817242?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165589587016782395328090%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=165589587016782395328090&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-2-102817242-null-null.142^v20rank_v33,157^v15new_3&utm_term=align-content&spm=1018.2226.3001.4187

原网站

版权声明
本文为[HHppGo]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206281254450086.html