网站流量分成,众筹网站建设费用,佛山注册公司无需地址,乐清市网论坛弹性布局 一、Flex布局是什么#xff1f; Flex是Flexible Box的缩写#xff0c;意为”弹性布局”#xff0c;用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 二、基本概念 采用Flex布局的元素#xff0c;称为Flex容器#xff08;flex container Flex是Flexible Box的缩写意为”弹性布局”用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 二、基本概念 采用Flex布局的元素称为Flex容器flex container简称”容器”。它的所有子元素自动成为容器成员称为Flex项目flex item简称”项目”。 代码如下 三、容器的属性 以下6个属性设置在容器上。 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content!DOCTYPE html html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle弹性布局/titlestylebody{margin: 0;padding: 0;} #main
{width:50vw;height:50vh;border:1px solid black;display:flex;margin: 0 auto;}#main div{flex:1;}/style
/head
bodydivdiv idmaindiv stylebackground:#ff01/divdiv stylebackground:#f0f2/divdiv stylebackground:#f003/divdiv stylebackground:#0ff4/divdiv stylebackground:#0f05/div/div/div
/body
/html 效果图 提示在css样式里面加上flex-direction:column;就会变成另外一种布局效果。如下图
