flex布局属性(使用Flex布局属性编写响应式网页布局优化)
Flex布局是CSS3*的一种弹性盒子布局，它利用直观的方式对容器中的元素进行布局控制，可以轻松实现柔性的响应式Web页面布局。本文将介绍Flex布局的几种主要属性，来帮助开发者更好的应用Flex布局优化页面布局，并实现响应式设计。
1. 容器和项目的设置
Flex最基本的概念是容器和项目。在Flex布局中，容器是放置项目的盒子，它定义了项目排列的规则和方向。要使用Flex布局，只需在容器上设置 display:flex 或 display:inline-flex ，并且容器需要设置所需的主轴方向。项目是容器中的子元素，在盒模型中具有“内容、内边距、边框、外边距”四个部分。项目的表现取决于容器设置的属性，开发者可以使用以下属性来控制容器和项目：1.1. 容器属性- flex-direction：决定主轴的方向（即项目的排列方向）。- flex-wrap：定义如何换行。- flex-flow：是以上两个属性的缩写，第一个属性定义了主轴的方向，第二个属性定义是否换行。- justify-content：定义主轴上项目的对齐方式。- align-items：定义交叉轴（与主轴垂直的轴）上的项目的对齐方式。- align-content：定义多根轴线的对齐方式。1.2. 项目属性- order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。- flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。- flex-shrink：定义了项目的缩小比例，默认为1，即当空间不足时，项目将缩小。- flex-basis：定义项目在分配多余空间之前，第一步将占据的主轴空间。- flex：是flex-grow、flex-shrink 和 flex-basis的一个简写，默认值为0 1 auto。后两个属性可选。- align-self：允许单个项目有与其他项目不同的对齐方式，可覆盖align-items属性。
2. 主轴 Flexbox 对齐
Flex居中似乎是Flex的最常见使用场景之一。Flex容器的justify-content属性可控制沿着container的主轴线如何分配项目的间隔空间。2.1. justify-content 属性的取值- flex-start：默认值。主轴上项目左对齐。- flex-end：主轴上项目右对齐。- center：主轴上项目居中对齐。- space-between：两端对齐，项目之间的间隔都相等。- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。2.2. 对齐具有弹性，容器的大小固定时，项目分布也相应固定。如果我们为容器加宽，则这个画布会变得更大：.container{\tdisplay: flex;\twidth: 800px;\theight: 200px;\tbackground-color: pink;\tjustify-content: space-around;\talign-items: center;\tmargin: 20px auto;\t}.container div{\twidth: 50%;\theight: 80%;\tbackground-color: #1890ff;\tborder-radius: 15px;\tline-height: 200px;\tcolor: white;\ttext-align: center;\tfont-size: 30px;}
3. 侧轴 Flexbox 对齐
容器这一维度的对齐方式非常好理解，而这个交叉维度的对齐就有些复杂。align-items 确定了包含器上子项的纵向对齐方式，而不是横向。3.1. align-items属性的取值- flex-start：交叉轴的起点对齐。- flex-end：交叉轴的终点对齐。- center：交叉轴的中点对齐。- baseline: 项目的第一行文字的基线对齐。- stretch(默认)：如果项目未设置高度或设置为auto，将占满整个容器的高度。
4. 轴线方向的控制
使用 flex-direction 属性可以实现与常规水平对齐的传统页面不同的布局方式，这意味着你可以采用新的布局思想，而不受浪费过多 CSS 代码的影响。要特别注意的是，它只会影响项目的对齐方法（开始，结束、居中对齐等等），而不影响项目自身的方向性。4.1. flex-direction 属性的取值- row：主轴为水平方向，起点在左端。- row-reverse：主轴为水平方向，起点在右端。- column：主轴为垂直方向，起点在上端。- column-reverse：主轴为垂直方向，起点在下端。
5. 其他 Flexbox 属性
5.1. flex-wrapflex-wrap属性定义多行包装，或者单行包装。- nowrap:默认。不换行。- wrap:换行，第一行在上方。- wrap-reverse:换行，第一行在下方。5.2. align-content如果有多行，该属性定义了各行之间的对齐方式，类似于 align-items，但它不是在单行中工作。- flex-start：与交叉轴的起点对齐。- flex-end：与交叉轴的终点对齐。- center：与交叉轴的中点对齐。- space-between：与交叉轴的起点对齐，行之间的间隔相等。- space-around：每行两边的间隔相等。所以，行之间的间隔比行与边框的间隔大一倍。- stretch（默认值）：拉伸行以占据剩余的空间。
6. Flexbox 常见用例
以上我们比较着重的讲解了一下 Flexbox 的常用属性和对齐方式等等，下面我们来举一些常见的用例，更能感性的理解这个布局思路。6.1. 垂直居中.parent{\tdisplay: flex;\talign-items: center;\t}\t6.2. 等分宽度.parent{\tdisplay: flex;\tjustify-content: space-between;\t}\t6.3. 两端对齐.parent{\tdisplay: flex;\tjustify-content: space-between;\t\talign-items: center;\t}\t6.4. 由于块级元素缺乏宽度，为了使其具备水平方向上的框线，我们通常使用 flex 来完成这个目标。.parent{\tdisplay: flex;\tjustify-content: space-between;\t}.children{\tdisplay: inline-flex;\twidth: 20%;\t}
结论
Flexbox 通过定义它们需要的轴上元素的弹性容器和可选子元素大小规则，对它们停放的方式进行了精确的定义。这种对项目的分布控制意味着，可以在列和行之间配对，而不必通过任意采用其他格式化方法的装饰性元素来翻译这份信息。从而使得Flexbox成为响应式Web页面布局的利器。
本文链接：http://xindalouti.com/a/3382959.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
相关推荐
-
风象星座最厉害的星座(风象星座哪个最冷血)
风象星座最厉害的星座(风象星座哪个最冷血)风象星座的人，他们是很有才华和创造力的一群人，但是在爱情上面却不太顺利，因为水瓶男跟双子女都比较花心，所以会让对方觉得自己没有安全感，而且也容易发生争吵，最后导致分手收场；天秤男虽然外表看起来很温柔体贴，其实内心非常的固执，只要认定了就绝对不回头。提问：火象星座中谁最厉害回答：狮子座、白羊座、射手座这三个星座可谓是十…
-
火辣辣的情歌抖音男版(男版火辣辣的情歌在抖音上走红)
1. 抖音火辣辣的情歌走红 近年来，抖音成为了年轻人展示自我、释放情感的平台。在许多用户上传的短视频中，火辣辣的情歌得到了广泛的传播和喜爱，尤其是男版的火辣辣的情歌更是受到了青睐。这些男版情歌不仅旋律优美，歌词深奥，更能抓住年轻人的心理，传达出一种热情奔放、豁达自由的情感。 2. 男版情歌的发布者 大部分男版火辣辣的情歌都是由*音乐人和网络歌手发布的，这些歌…
-
太古神魔诀 今忆(《太古神魔诀》：一段激情燃烧的武侠奇幻之旅)
一、觉醒的时刻 我还记得，那是一个寒冷的冬夜，我在家里看完了《太古神魔诀》第一部。那一刻，我仿佛被从沉睡中唤醒，一股强烈的热血在心中沸腾。就像主角青风觉醒的时刻一样，我也觉得我也有一段不凡的旅程要开始了。 二、重重险阻 随着故事的深入，主角青风和他的伙伴们一路面对着各种险阻。从幽深的山洞到恶毒的敌人，他们一次次磨练着意志，提升着武艺。而在这个过程中，每一个人…
-
石家庄酒吧兼职招聘信息(石家庄酒吧招聘信息公布)
酒吧行业需求量日益增加 在石家庄这个城市中，随着夜生活的兴起，酒吧行业异军突起，呈现繁荣趋势，不少青年人参与其中，成为部分酒吧的招聘主力。各个酒吧纷纷发布招聘信息，涉及的职位种类也有多种，经理、服务员和DJ等，这些职位也引来了不少人的关注。酒吧行业的快速发展，增加了市场需求，招聘人员也越来越多。 酒吧招聘行业具有竞争性 虽然市场上招聘需求量日益增加，但是酒吧…
-
易经怎么算命的(易经如何推算八字)
易经怎么算命的(易经如何推算八字)1、先天八卦:乾为父,坤为母震为长男,巽为长女坎为中男,离为中女艮为少男,兑为少女2、后天八卦:坎为水,离为火震为雷,巽为风艮为山,兑为泽干为天,坤为地巽为长女,坎为中男,艮为少男,离为中女,兑为少女3、六十四卦:乾一、兑二、离三、震四、巽五、坎六、艮七、坤八4、河图洛书:乾一、兑二、离三、震四、巽五、坎六、艮七、坤八5、先…
-
算命by木笙TXT下载(算命吗?超准哒!by老大白猫)
算命by木笙TXT下载(算命吗?超准哒!by老大白猫)《算命》是木笙所著的一本小说,由晋江文学城出版,主要讲述了两个男人之间纠缠不清的爱情故事,他们都有着各自的秘密和过去,但却因为同样的执念而相遇、相知并且最终走到一起的故事“我只想找回失踪多年的哥哥”“你可以叫我阿笙。”——“如果这就是你给我的名字呢那么我愿意”——“好啊,既然你也没什么别的话对我说,那么从…
-
大唐极品王爷笔趣阁(大唐王爷：朕即天下)
一、历史背景 唐朝盛世，*，国泰民安。大唐江山一片繁华，但在这虚华之下，依旧蕴藏着暗流涌动。其中，官场更是黑风高起，专业的买官卖官、权钱交易相互交织。善恶的悬殊，让普通百姓在神仙眷顾下，生*命运皆于一掷之间。而在这如风如雨的纷乱江湖中，一个身份不明的神秘男子出现了！他名叫李华阳，人称大唐极品王爷…… 二、主角介绍 李华阳，出身不详，地位神秘。其力量惊人，足以…
-
米兰阵容2017(米兰足球俱乐部2017年的阵容情况)
第一部分：引言 米兰足球俱乐部总是被认为是意大利最优秀的足球俱乐部之一。这个在意大利的北部城市里成立的足球俱乐部，拥有着悠久的历史和精湛的技艺。在2017年，米兰足球俱乐部为了进一步壮大阵容，进行了大量的转会*作，使得阵容更加强大，更具竞争力。接下来，我们将对米兰足球俱乐部2017年的阵容情况做详细的分析。 第二部分：球队历史 米兰足球俱乐部创建于1899年…
-
瑞安一职学校在哪里啊(如何寻找瑞安一职学校的位置？)
1. 瑞安一职学校介绍 瑞安一职学校是一所专业的职业技术学校，坐落在*浙江省温州市瑞安市。它成立于1999年，是以培养现代化服务业、制造业等多个行业人才为主要目标。现在，这所学校一直在为当地社会经济和人才发展做出自己的贡献。 2. 如何前往瑞安一职学校？ 如果你想前往瑞安一职学校，最方便的方法是通过公共交通工具，如公交车或地铁。从温州市区出发，你可以搭乘前往…
-
民间小调瞎子算命完整(民间小调瞎子算卦完整版)
民间小调瞎子算命完整(民间小调瞎子算卦完整版)瞎子算命先生是指鸡,因为鸡的眼睛看不见东西,所以叫做“瞎子”但这个说法并没有科学依据在古代*民间就流传着很多关于鸡的歇后语和故事:如“半夜三更—抱鸡母”、“半夜三更—公鸡报晓”等其实,人们之所以用“瞎子”来称呼鸡,主要还是由它的生活习性决定的。一般情况下,鸡都喜欢成群结队地觅食,而且总爱走到人类聚居区附近去寻找食…
