flex-layout-demo:Flex布局教程,包含示例代码

时间:2024-06-02 02:45:32
【文件属性】:

文件名称:flex-layout-demo:Flex布局教程,包含示例代码

文件大小:228KB

文件格式:ZIP

更新时间:2024-06-02 02:45:32

HTML

flex-layout-demo 参考: [1] [2] [3] [4] Flex布局简介 Flex英文为flexiable box,翻译为弹性盒子,Flex布局即弹性布局。 Flex布局为盒子模型提供了很大的灵活性,任何一个容器都可以指定为Flex布局,设置方法为: .box{ display: flex; } 行内元素使用Flex布局 .box{ display: inline-flex; } 在webkit内核的浏览器上必须加上webkit前缀 .box{ display: flex; display: -webkit-flex; } 注意:使用Flex布局之后,里面的float、clear、vertical-align属性将失效。 Flex布局中的基本概念 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自


【文件预览】:
flex-layout-demo-master
----images()
--------flex-grow.jpg(10KB)
--------flexdemo3.jpg(5KB)
--------flex-wrap3.jpg(9KB)
--------flex-driection2.jpg(7KB)
--------align-items2.jpg(11KB)
--------align-self.jpg(8KB)
--------align-content4.jpg(10KB)
--------order.jpg(7KB)
--------flexdemo2.jpg(5KB)
--------align-content1.jpg(10KB)
--------align-content2.jpg(11KB)
--------case1.jpg(25KB)
--------align-content5.jpg(9KB)
--------flexdemo5.jpg(7KB)
--------align-items5.jpg(12KB)
--------flex-driection3.jpg(7KB)
--------align-content3.jpg(9KB)
--------justify-content5.jpg(10KB)
--------flexdemo1.jpg(3KB)
--------justify-content2.jpg(10KB)
--------flex-wrap1.jpg(8KB)
--------align-items4.jpg(12KB)
--------justify-content3.jpg(10KB)
--------flex-wrap2.jpg(9KB)
--------justify-content4.jpg(10KB)
--------flex-driection4.jpg(9KB)
--------align-items1.jpg(9KB)
--------flex-driection1.jpg(7KB)
--------align-items3.jpg(11KB)
--------justify-content1.jpg(8KB)
--------align-content6.jpg(12KB)
--------flexdemo6.jpg(14KB)
--------flexdemo4.jpg(9KB)
----flex-grow.html(402B)
----justify-content.html(677B)
----layoutdemo1.html(275B)
----align-content.html(810B)
----layoutdemo6.html(977B)
----order.html(423B)
----layoutdemo3.html(500B)
----align-self.html(395B)
----align-items.html(799B)
----layoutdemo5.html(470B)
----layoutdemo4.html(985B)
----.project(631B)
----layoutdemo2.html(401B)
----README.md(16KB)
----flex-driection.html(563B)
----flex-wrap.html(520B)

网友评论