CSS

flex弹性盒模型

字号+ 编辑: Snake 修订: 小红帽 来源: 慕课网 2023-09-11 我要说两句(0)

这一章节学习flex弹性盒子模型

弹性盒模型之flex属性

这一章节学习flex弹性盒子模型,根据下面的例子来理解一下:

 图片27.jpg

实现上图效果,我们需要输入以下代码:

<style>
/*给父级元素的display属性设置为fle即可*/
.box{
height:400px;
background:skyblue;
display:flex;
}
.box1{
width:200px;
height:200px;
background:red;
}
.box2{
 width:200px;
height:200px;
background:red;
}
 .box3{
 width:200px;
height:200px;
background:green;
}
</style>
<body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
</body>

上面的代码:

三个块元素设置大小以及背景色,在父容器中添加flex。

技术点的解释:

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上,改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

14-2 使用justify-content属性设置横轴排列方式

justify-content属性,本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解,属性值分别为:

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start:交叉轴的起点对齐

.box {
    background: blue;
    display: flex;
    justify-content: flex-start;
}

 图片30.jpg

flex-end:右对齐

.box{
    background: blue;
    display: flex;
    justify-content: flex-end;
}

 图片31.jpg

center: 居中

.box {
    background: blue;
    display: flex;
    justify-content: center;
}

 图片32.jpg

space-between:两端对齐,项目之间的间隔都相等。

.box {
    background: blue;
    display: flex;
    justify-content: space-between;
}

 图片33.jpg

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

.box {
  background: blue;
  display: flex;
  justify-content: space-around;
}

  图片34.jpg

14-3 使用align-items属性设置纵轴排列方式

align-items属性,本属性定义了项目在交叉轴上的对齐方式。属性值分别为:

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

结合右侧编辑器中的布局以及下面的样式设置进行理解:

flex-start:默认值,左对齐

.box {
    height: 700px;
    background: blue;
    display: flex;
    align-items: flex-start;
}

 图片35.jpg

flex-end:交叉轴的终点对齐

.box {
    height: 700px;
    background: blue;
    display: flex;
    align-items: flex-end;
}

 图片36.jpg

center:交叉轴的中点对齐

.box {
    height: 700px;
    background: blue;
    display: flex;
    align-items: center;
}

 图片37.jpg

baseline:项目的第一行文字的基线对齐。

.box {
    height: 700px;
    background: blue;
    display: flex;
    align-items: baseline;
}

三个盒子中设置不同的字体大小,可以参考右侧编辑器中的代码进行测试。

 图片38.jpg

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

.box {
    height: 300px;
    background: blue;
    display: flex;
    align-items: stretch;
}
.box div {
/*不设置高度,元素在垂直方向上铺满父容器*/
    width: 200px;
}

图片39.jpg

14-4 给子元素设置flex占比

flex属性,设置子元素相对于父元素的占比。

可以参考右侧编辑器的代码,测试效果如下:

 图片40.jpg

技术点的解释:

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

阅完此文,您的感想如何?
  • 有用

    0

  • 没用

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.Q群: 2702237 13835667

相关课文
  • 多个高度相同, 属性inline-block的div,有的div没有内容而有的div有内容,有内容的会下沉?

  • 让整个网页全局变成黑白色调的css代码

  • CSS生成内容

  • CSS3外轮廓属性

我要说说
网上宾友点评