css3弹性盒子-CSS3(FlexBox)弹力袋解读

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

文章目录

前言

1.CSS3弹力袋内容

二、CSS3弹力袋属性

对齐内容属性

对齐项目属性

flex-wrap 属性

3.使用弹力袋创建响应式页面

总结

前言

弹性袋是一种新型的袋子模型css3弹性盒子，在书中也称为弹性柔性盒布局，它致力于提供一种越来越有效的方式来在容器之间排列、对齐和分配物品，尽管它们的尺寸未知或正在动态变化。

灵活布局的主要思想是让容器能够改变item的长度和高度以填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。

正文1.CSS3弹力袋内容

弹性袋由弹性容器（Flexcontainer）和弹性元件（Flexitem）组成。

Flex容器通过将display属性设置为flex或inline-flex来定义为Flex容器。

Flex 容器包含一个或多个 Flex 元素。

注意：flex容器的外部和flex元素的内部都正常渲染。 Flex-bag 只是定义了 Flex 元素在 Flex 容器内的布局方式。

弹力元素通常显示在弹性袋内的单行上。 默认情况下，每个容器只有一行。

以下元素从左到右显示在一行中显示的元素：

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}



 

  
flex item 1
  
flex item 2
  
flex item 3
 

 

运行结果：

其实我们可以改变排列形式。

如果我们将direction属性设置为rtl（从右到左）css3弹性盒子，元素的排列方式就会改变，页面的布局也会随之改变：

body {
    direction: rtl;
}
 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

运行结果：

二、CSS3弹力袋属性

右图列出了弹力袋常用的性能：

编辑

对齐内容属性

align-content 属性用于更改 flex-wrap 属性的行为。 与align-items类似，但它不是设置元素的对齐方式，而是设置每行的对齐方式。

句型：

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各值分析：

对齐项目属性

align-items 设置或检索 Flex bag 元素在横轴（水平轴）方向上的对齐方法。

句型：

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

各值分析：

flex-wrap 属性

flex-wrap 属性用于指定弹性包子元素的包裹形式。

句型：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各值分析：

3.使用弹力袋创建响应式页面

 
 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}
.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}
.main {
    text-align: left;
    background: cornflowerblue;
}
.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}
@media all and (min-width: 600px) {
    .aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {
    .main    { flex: 3 0px; }
    .aside1 { order: 1; } 
    .main    { order: 2; }
    .aside2 { order: 3; }
    .footer  { order: 4; }
}




  
头部
  

    
欢迎大家和我一起学习前端知识
  
  
  
  

运行结果：

总结

Flexbag是CSS3中的一种新的布局模式。

CSS3FlexibleBox（FlexibleBox或flexbox）是一种布局形式，当页面需要适应不同的屏幕尺寸和设备类型时，可以确保元素的正确行为。

引入 Flexbox 布局模型的目的是提供一种越来越有效的方法来在容器内的子元素之间排列、对齐和分布空白。