张店网站建设定制,高新快速建设网站电话,品牌建设岗位职责,淘宝客网站下载目录 一、简介二、父元素属性2.1、flex-direction2.2、justify-content2.3、align-items2.4、flex-wrap2.5、flex-flow2.6、align-content 三、子元素属性3.1、flex3.2、align-self3.3、order 一、简介 Flex是Flexible Box的缩写#xff0c;意为”弹性布局”#xff0c;用来为… 目录 一、简介二、父元素属性2.1、flex-direction2.2、justify-content2.3、align-items2.4、flex-wrap2.5、flex-flow2.6、align-content 三、子元素属性3.1、flex3.2、align-self3.3、order 一、简介 Flex是Flexible Box的缩写意为”弹性布局”用来为盒状模型提供最大的灵活性。本文中源码并不是每次都一样会有一些区别比如有时没有宽度等不要一直在一个源码上改没有特别说明都是一个属性对一个源码。 还有就是本文说得 Flex布局的属性都是常见属性并不是只有这些如果想学更多属性可以参考官网或者其他学习网站。
二、父元素属性
2.1、flex-direction flex-direction 顺序指定了弹性子元素在父容器中的位置flex-direction的值有:
flex-direction: row | row-reverse | column | column-reverserow横向从左到右排列左对齐默认的排列方式。row-reverse反转横向排列右对齐从后往前排最后一项排在最前面。column纵向排列。column-reverse反转纵向排列从后往前排最后一项排在最上面。
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {width: 400px;height: 300px;background-color: lightblue;margin: 0 auto; /* 水平居中 */padding: 10px; /* 内边距容易观察 */display: flex; /* 启用 Flex 布局 *//* flex-direction的取值可以为: row | row-reverse | column | column-reverse */flex-direction: row;/* flex-direction: row-reverse; *//* flex-direction: column; *//* flex-direction: column-reverse; */}.flex-item {width: 60px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-itemitem 4/div/div/body
/html结果图如下 2.2、justify-content 属性用于控制 Flex 容器内部 Flex 子项沿着主轴的对齐方式。这个属性适用于控制 Flex 容器中的内容在主轴上的排列位置。justify-content的值有:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyflex-start默认值。Flex 子项在主轴上与 Flex 容器的起始位置对齐flex-endFlex 子项在主轴上与 Flex 容器的末尾位置对齐centerFlex 子项在主轴上居中对齐space-betweenFlex 子项沿主轴均匀分布首尾两端不留间隙space-aroundFlex 子项沿主轴均匀分布两侧留有相等的间隙space-evenly: Flex 子项沿主轴均匀分布包括首尾两端和子项之间都留有相等的间隙
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {margin: 0 auto; /* 水平居中 */width: 400px;height: 300px;background-color: lightblue;display: flex;flex-direction: row;/* justify-content的取值可以为flex-start | flex-end | center | space-between | space-around |space-evenly *//* 默认值 flex-start*/justify-content: flex-start;/* justify-content: flex-end; *//* justify-content: center; *//* justify-content: space-between; *//* justify-content: space-around; *//* justify-content: space-evenly; */}.flex-item {width: 60px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-itemitem 4/div/div/body
/html当 flex-direction: row 结果图如下 在上面的源码基础上设置 flex-direction: column 结果图如下 2.3、align-items 属性用于控制 Flex 容器内部 Flex 子项在交叉轴上的对齐方式。align-items 可以设置的属性值
align-items: stretch | flex-start | flex-end | center | baseline stretch默认值拉伸子项以填满整个交叉轴的空间flex-start子项在交叉轴的起点对齐flex-end子项在交叉轴的末端对齐center子项在交叉轴上居中对齐baseline子项根据它们的基线如果有对齐
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {margin: 0 auto; /* 水平居中 */width: 400px;height: 300px;background-color: lightblue;display: flex;flex-direction: row;/* align-items的取值可以为stretch | flex-start | flex-end | center | baseline */align-items: flex-start;/* align-items: flex-end; *//* align-items: center; *//* align-items: baseline; *//* 默认值 stretch *//* align-items: stretch; */ /* 子元素不能有高度 */}.flex-item {width: 60px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}.special-item{height: 120px; /* 会覆盖上面的高度 */}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-item special-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-item special-itemitem 4/div/div/body
/html结果图如下 当 align-items: stretch 时示例代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {width: 400px;height: 300px;background-color: lightblue;margin: 0 auto; /* 水平居中 */display: flex;flex-direction: row;/* align-items的取值可以为stretch | flex-start | flex-end | center | baseline *//* 默认值 stretch */align-items: stretch; /* 子元素不能有高度 *//* align-items: flex-start; *//* align-items: flex-end; *//* align-items: center; *//* align-items: baseline; */}.flex-item {width: 60px;/* height: 60px; */ /* 当为stretch时去除掉高度 */border: 1px solid black; /* 加个边框 */background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-itemitem 4/div/div/body
/html结果图如下 当 align-items: baseline 时示例代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {width: 400px;height: 300px;background-color: lightblue;margin: 0 auto; /* 水平居中 */display: flex;flex-direction: row;/* align-items的取值可以为stretch | flex-start | flex-end | center | baseline *//* 默认值 stretch *//* align-items: stretch; */ /* 子元素不能有高度 *//* align-items: flex-start; *//* align-items: flex-end; *//* align-items: center; */align-items: baseline; /* 按照项目内的文字对齐 */}.flex-item {width: 60px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}.special-item{height: 120px; /* 会覆盖上面的高度 */}/style/headbodydiv classflex-containerdiv classflex-item stylepadding-top: 20px;item 1/div !-- 加了内边距演示 --div classflex-item special-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-item special-itemitem 4/div/div/body
/html结果图如下 2.4、flex-wrap 在 Flex 布局中flex-wrap 属性用于控制 Flex 容器中的 Flex 子项是否换行。flex-wrap的值有:
flex-wrap: nowrap | wrap | wrap-reversenowrap默认值不换行所有 Flex 子项会尽量排在一行内wrap允许 Flex 子项在需要时换行第一行在上方紧接着的行在下方wrap-reverse允许 Flex 子项在需要时换行第一行在下方紧接着的行在上方
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {width: 500px;height: 400px;background-color: lightblue;margin: 0 auto; /* 水平居中 */display: flex;flex-direction: row;/* flex-wrap的取值可以为nowrap | wrap | wrap-reverse *//* 默认值 nowrap */flex-wrap: nowrap;/* flex-wrap: wrap; *//* flex-wrap: wrap-reverse; */}.flex-item {width: 100px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-itemitem 4/divdiv classflex-itemitem 5/divdiv classflex-itemitem 6/divdiv classflex-itemitem 7/div/div/body
/html结果图如下 2.5、flex-flow flex-flow 是一个缩写属性结合了 flex-direction 和 flex-wrap 两个属性用于同时设置 Flex 容器的主轴方向和子项的换行方式flex-flow 属性的语法格式如下
flex-flow: flex-direction flex-wrap;这里 flex-direction、flex-wrap就是我们上面提到的取值随意组合。
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {width: 500px;height: 400px;margin: 0 auto; /* 水平居中 */background-color: lightblue;display: flex;/* flex-flow的取值可以为flex-direction 和 flex-wrap 的组合属性 */flex-flow: row wrap;/* flex-flow: column wrap; */}.flex-item {width: 100px;height: 100px;border: 1px solid black; /*加个边框*/background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-itemitem 4/divdiv classflex-itemitem 5/divdiv classflex-itemitem 6/divdiv classflex-itemitem 7/divdiv classflex-itemitem 8/divdiv classflex-itemitem 9/divdiv classflex-itemitem 10/div/div/body
/html结果图如下 2.6、align-content align-content 属性用于控制多根轴线Flex 容器内部的行或列在交叉轴上的对齐方式当有多根轴线时才会生效。它可以设置的属性值有
align-contentstretch | flex-start | flex-end | center | space-between | space-around | space-evenlystretch默认值。轴线占满整个交叉轴如果子项没有设置高度将被拉伸至与容器相同的高度flex-start多根轴线在交叉轴的起始位置对齐flex-end多根轴线在交叉轴的末端位置对齐center多根轴线在交叉轴上居中对齐space-between轴线均匀分布在交叉轴上首尾两根轴线与容器边框对齐轴线之间间隔相等space-around轴线均匀分布在交叉轴上轴线两侧的间隔是轴线之间间隔的一半space-evenly轴线均匀分布在交叉轴上包括轴线两侧和轴线之间的间隔均相等
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {margin: 0 auto; /* 水平居中 */width: 500px;height: 500px;background-color: lightblue;display: flex;flex-direction: row;flex-wrap: wrap; /* align-content得多行还有效果所以设置换行 *//* align-content的取值可以为stretch | center | flex-start | flex-end | space-between | space-around | space-evenly *//* 默认值 *//* align-content: stretch; */align-content: flex-start;/* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* align-content: space-evenly; */}.flex-item {width: 100px;height: 100px;border: 1px solid black; /* 加个边框 */background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-itemitem 4/divdiv classflex-itemitem 5/divdiv classflex-itemitem 6/divdiv classflex-itemitem 7/divdiv classflex-itemitem 8/divdiv classflex-itemitem 9/divdiv classflex-itemitem 10/div/div/body
/html结果图如下 当 align-content: stretch 时示例代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {width: 500px;height: 500px;background-color: lightblue;margin: 0 auto; /* 水平居中 */display: flex;flex-direction: row;flex-wrap: wrap; /* align-content得多行还有效果所以设置换行 *//* align-content的取值可以为stretch|center|flex-start|flex-end|space-between|space-around|space-evenly *//* 默认值 stretch*/align-content: stretch;/* align-content: flex-start; *//* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* align-content: space-evenly; */}.flex-item {width: 100px;/* height: 100px; */ /* stretch使用时子元素不能有高度 */border: 1px solid black; /*加个边框*/background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-itemitem 4/divdiv classflex-itemitem 5/divdiv classflex-itemitem 6/divdiv classflex-itemitem 7/divdiv classflex-itemitem 8/divdiv classflex-itemitem 9/divdiv classflex-itemitem 10/div/div/body
/html结果图如下 三、子元素属性
3.1、flex 在 CSS 的 Flex 布局中flex 属性是一个复合属性用于设置 Flex 容器内 Flex 项目的伸缩能力、伸缩基准以及伸缩项目占据的空间比例。flex 属性可以设置三个值分别是
flexflex-grow | flex-shrink | flex-basisflex-grow定义 Flex 项目的放大比例默认值为 0。它决定了 Flex 项目在有剩余空间时的放大比例如果为 0则不放大。flex-shrink定义 Flex 项目的收缩比例默认值为 1。它决定了 Flex 项目在空间不足时的收缩比例如果为 0则不收缩。flex-basis定义了 Flex 项目在分配多余空间之前所占据的空间大小默认值为 auto。可以设置为具体的长度值或百分比也可以设置为 content、auto 等。
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {width: 500px;height: 500px;background-color: lightblue;margin: 0 auto; /* 水平居中 */display: flex;flex-direction: row;}.flex-item {width: 80px;height: 80px;border: 1px solid black; /* 加个边框 */background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-itemitem 2/divdiv classflex-itemitem 3/divdiv classflex-itemitem 4/div/div/body
/html结果图如下
3.2、align-self align-self 属性用于覆盖 Flex 容器的 align-items 属性单独为 Flex 项目设置在交叉轴上的对齐方式。它可以用于单个 Flex 项目控制该项目在交叉轴上的对齐方式。
align-selfstretch | center | flex-start | flex-end | baseline | autoauto使用父元素即 Flex 容器的 align-items 值。flex-start项目向交叉轴起始位置对齐。flex-end项目向交叉轴末端位置对齐。center项目在交叉轴上居中对齐。baseline项目根据它们的基线对齐。stretch项目被拉伸以适应交叉轴。
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {display: -webkit-flex;/*webkit内核的浏览器*/margin: 0 auto; /* 水平居中 */width: 500px;height: 500px;background-color: lightblue;display: flex;flex-direction: row;align-items: flex-start;/* align-self的取值可以为stretch | center | flex-start | flex-end | baseline | auto *//* 默认值 *//* align-self: stretch; */align-self: flex-start;/* align-self: flex-end; *//* align-self: center; *//* align-self: stretch; *//* align-self: baseline; */}.flex-item {width: 80px;height: 80px;border: 1px solid black; /*加个边框*/background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-item stylealign-self: center;item 2/divdiv classflex-item stylealign-self: flex-end;item 3/divdiv classflex-itemitem 4/div/div/body
/html结果图如下
3.3、order 在 Flex 布局中order 属性用于控制 Flex 项目的排列顺序。它指定了 Flex 容器内各个项目的排列顺序值为整数可以是正数、负数或零。 默认情况下Flex 项目的 order 属性值为 0表示它们按照其在源代码中的顺序依次排列。当给定了不同的 order 值时数值小的项目将优先排在前面数值大的项目排在后面。
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /style.flex-container {width: 500px;height: 500px;background-color: lightblue;margin: 0 auto; /* 水平居中 */display: flex;flex-direction: row;}.flex-item {width: 80px;height: 80px;border: 1px solid black; /* 加个边框 */background-color: orange;}/style/headbodydiv classflex-containerdiv classflex-itemitem 1/divdiv classflex-item styleorder: 3;item 2/divdiv classflex-itemitem 3/divdiv classflex-item styleorder: -1;item 4/div/div/body
/html事例图
