弹性盒子模型-526互联

弹性盒子模型(flex box)

定义

弹性盒子是CSS3的一种新的布局模式

CSS3弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间

CSS3弹性盒内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置display属性的值为flex将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

温馨提示

弹性容器外及弹性子元素内是正常渲染的,弹性盒子只定义了弹性子元素如何在弹性容器内布局

 <head>
 <style>
        .container {
            width: 500px; 
            height:500px;
            background-color: #555;
            display:flex;
        }
        .box1{
          width: 100px; 
          height: 100px;
          background-color: red;  
        }
        .box2{
          width: 100px; 
          height: 100px;
          background-color: green;  
        }
        .box3{
          width: 100px; 
          height: 100px;
          background-color: blue;  
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

温馨提示

默认弹性盒子里内容横向摆放

父元素上的属性

display属性

diaplay:flex;开启弹性盒子

diaplay:flex;属性设置后子元素默认水平排列

flex-direction属性
定义
flex-direction属性指定了弹性子元素在父容器中的位置
语法

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

row:横向从左到右排列(左对齐)，默认的排列方式
row-reverse:反转横向排列(右对齐，从后往前排，最后一项排在最前面
column:纵向排列
column-reverse:反转纵向排列，从后往前排，最后一项排在最上面

justify-content属性
定义
内容对齐(justify-content)属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线(mainaxis)对齐
语法

 justify-content:flex-start | flex-end | center

flex-start弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
flex-end弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
center弹性项目居中紧挨着填充。(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出)

align-items属性
定义
align-items设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式
语法

align-items:flex-start|flex-end|center

flex-start弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界
flex-end 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界
center弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)

子元素上的属性

flex
flex根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
默认为0，即如果存在剩余空间，也不放大
如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%