Flexbox（弹性盒子）

时间 2020-06-22

标签 flexbox 弹性盒子栏目 Flex 繁體版

原文原文链接

CSS3属性：这是一个能够让你告别浮动、完美实现垂直水平居中的新特性。css

Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。html

属性介绍：前端

建立Flex容器web

.container{
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    display:-ms-flexbox;
}

Flex-direction（旋转主轴、容器属性）：一个主轴（main axis）和一个侧轴（cross axis）布局

row：

主轴与行内轴方向做为默认的书写模式。即横向从左到右排列（左对齐）。

row-reverse：

对齐方式与row相反。

column：

主轴与块轴方向做为默认的书写模式。即纵向从上往下排列（顶对齐）。

column-reverse：

对齐方式与column相反。

#container {
  display: flex;
  flex-direction: column;
}

justify-content（容器属性）:设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。flex

flex-start：
　　弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时全部后续的伸缩盒项目与其前一个项目对齐。
flex-end：
　　弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时全部后续的伸缩盒项目与其前一个项目对齐。
center：
　　弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（若是剩余空间是负数，则保持两端相等长度的溢出）。
space-between：
　　弹性盒子元素会平均地分布在行里。若是最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它状况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around：
　　弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。若是最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它状况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其余空白空间的一半。flexbox

align-self（子项属性）:spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS:flex</title>
    <style type="text/css">
        /*float、clear和vertical-align 属性将失效。*/
        .flex-content{
            display: flex;
            display: -webkit-flex;
            border:1px solid #c0c0c0;
            width: 400px;
            height:400px;
            margin:auto;
        }
        .flex-box{
            width:100px;
            height:100px;
            background:black;
            margin:10px;
        }

        .flex-self{
            align-self:baseline;
        }
    </style>
</head>
<body>
<div class="flex-content">
    <div class="flex-box flex-self">1</div>
    <div class="flex-box">2</div>
    <div class="flex-box">3</div>
    <div class="flex-box">4</div>
</div>
</body>
</html>

flex-grow（子项属性）:用数值来定义扩展比率。不容许负值code

<ul class="flex"> 
    <li>a</li> 
    <li>b</li>
     <li>c</li> 
</ul> 
<style>
.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;} .flex li:nth-child(1){width:200px;} 
.flex li:nth-child(2){flex-grow:1;width:50px;} 
.flex li:nth-child(3){flex-grow:3;width:50px;}
</style>

flex-basis（子项属性）: (<length> | <percentage> | auto | content)设置或检索弹性盒伸缩基准值。htm

length:用长度值来定义宽度。不容许负值

percentage:用百分比来定义宽度。不容许负值

content：基于内容自动计算宽度

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>flex-basis_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{
    display:-webkit-flex;
    display:flex;
    width:600px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(3){
    -webkit-flex-basis:600px;
    flex-basis:600px;
}
</style>
</head>
<body>
<h1>flex-basis示例：</h1>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
</body>
</html>