首页 > 软件操作教程 > 编程开发 > CSS
题目内容

CSS3 对子级元素的设置 1. flex

题目答案

    flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性。

    语法如下:

    ilex: flex-grow flex-ishrink ilex-basis | auto | initial | inherit;


    flex属性的值可以是以下几种:

    © flex-grow: 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。

    © flex-shrink:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。

    © flex-basis:项目的长度。合法值为auto、inherit,也可以是一个后跟%、px、em或任何其 他长度单位的数字。

    © auto: 11 auto相同。

    © none:与0 0 auto相同。

    © initial:设置该属性为它的默认值,即为01 auto。 o inherit:从父元素继承该属性。

    下面通过实例来理解flex属性。

    【例题】使用flex属性

    代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.container{

width: 500px;

height: 500px;

border:5px red solid;

display:flex;

/*justify-content: space-around;*/

flex-wrap: wrap;

}

.content{

height: 100%;

background: lightpink;

color:#fff;

font-size: 50px;

text-align: center;

line-height: 100px;

flex: 1;

}

.c2{

background: lightblue;

}

.c3{

background: yellowgreen

}

</style>

</head>

<body>

<div>

<div class="content c1">1</div>

<div class="content c2">2</div>

<div class="content c3">3</div>

<div class="content c4">45678910</div>

</div>

</body>

</html>

image.png

网友评论(共0条评论)

请自觉遵守互联网相关政策法规,评论内容只代表网友观点!

最新评论

点击加载更多评论>>

软件操作 新人注册送三重礼

已有 22658 名学员学习以下课程通过考试

相关视频试题

最需教育客户端 软件问题一手掌握

去 App Store 免费下载 iOS 客户端