css3通过设置display属性的值为flex或inline-flex声明盒子d性。d性盒子由d性容器(Flex container)和d性子元素(Flex item)组成,d性容器内包含了一个或多个d性子元素。
本教程 *** 作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
d性盒子由d性容器(Flex container)和d性子元素(Flex item)组成。
d性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为d性容器。d性容器内包含了一个或多个d性子元素。
注意: d性容器外及d性子元素内是正常渲染的。d性盒子只定义了d性子元素如何在d性容器内布局。
d性子元素通常在d性盒子内一行显示。默认情况每个容器只有一行。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <!DOCTYPE html> <html> <head> <style> .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; text-align: center; line-height: 100px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">d性容器 1</div> <div class="flex-item">d性容器 2</div> <div class="flex-item">d性容器 3</div> </div> </body> </html> </html>
效果:
推荐学习:css视频教程
以上就是css3如何声明盒子d性的详细内容,
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)