css display:flex 属性

一:display:flex 布局

display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二:flex的六个属性

  • flex-direction 容器内元素的排列方向(默认横向排列)
    1:flex-direction:row; 沿水平主轴让元素从左向右排列

    1536039075.png

    2:flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

    1536039314(1).png

    3:flex-direction:row-reverse;沿水平主轴让元素从右向左排列

    1536039460(1).png

  • flex-wrap 容器内元素的换行(默认不换行)
    1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;
    2:flex-wrap: wrap; 元素换行,比如:一个div宽度100%,设置此属性,第二个div就在第二行了;
  • justify-content 元素在主轴(页面)上的排列
    1:justify-content : center;元素在主轴(页面)上居中排列

    1536041764(1).png

    2:justify-content : flex-start;元素在主轴(页面)上由左或者上开始排列

    1536041631(1).png

    3:justify-content : flex-end;元素在主轴(页面)上由右或者下开始排列

    1536042053(1).png

    4:justify-content : space-between;元素在主轴(页面)上左右两端或者上下两端开始排列

    1536042390(1).png

    5:justify-content : space-around;每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍。

    1536042636(1).png

  • align-items 元素在主轴(页面)当前行的横轴(纵轴)方向上的对齐方式
    1:align-items : flex-start; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐)。

    1536043107(1).png

    2:align-items : flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。(靠下对齐)

    1536043238(1).png

    3:align-items : center; 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐)

    1536043373(1).png

    4:align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条,则该值与‘flex-start‘等效。其它情况下,该值将参与基线对齐。(靠上对齐)

  • align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
#main {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: flex-start;
}
#main div {
  width: 70px;
  height: 70px;
}

1:align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。

1536046493(1).png

2:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。

1536046542(1).png

3:align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。

1536046654(1).png

4:align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于‘flex-start‘。

1536046771(1).png

5:align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

1536046899(1).png

6:align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于‘center‘。

1536047051(1).png

三:flex常见属性总结

  • Positional alignment
    justify-content: center; :居中排列
    justify-content: flex-start; /* 从行首起始位置开始排列 /
    justify-content: flex-end; /
    从行尾位置开始排列 */

原文地址:https://www.cnblogs.com/andyZhang0511/p/11145983.html

时间: 2024-10-06 12:58:32

css display:flex 属性的相关文章

CSS display:flex的示例

在编写下图类似的HTML时,我最初使用的float,发现浮动的写法很不方便,后面经百度改用display:flex进行布局,并对这一CSS属性产生了浓厚的兴趣. 通过几行代码轻松解决了左右对齐显示,并且意外发现通过 align-items: center 还可以实现上下对齐居中 我正在使用 styled-components 去实现前端效果,所以代码分为样式部分style.js和页面部分index.js style.js: 1 export const Legend = styled.div`

css display:flex布局介绍

定义容器的display属性 .box{ display: -webkit-flex; /*webkit*/ display: flex; } /*行内flex*/ .box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; } 容器样式 .box{ flex-direction: row | row-reverse | column | column-reverse; /*主轴方向:左到右(默认) | 右到左 | 上到

CSS display:table属性用法- 轻松实现了三栏等高布局

display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用,但是现在是移动端的天下了,ie 说拜拜吧~ 与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, posi

CSS——display:flex

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 设为Flex布局以后,子元素的float.clear和vertical-align属性将失效.它即可以应用于容器中,也可以应用于行内元素.(以上说明结合微信开发者工具说明)2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. <!DOCTYPE html> &

display:flex属性 justify-content: space-between换行后的排版问题

<style> .wrap { width: 400px; display:flex;  /*弹性盒子*/ justify-content: space-between; /*两端对齐,子元素之间有间隙*/ flex-flow: row wrap;/*子元素溢出父容器时换行*/ } span {width: 100px;background-color: green;color:#fff;border-radius: 5px;margin-top: 10px;padding: 10px;} &

css attr, @supports属性

div 实现input 的placeholder效果 contenteditable="true"属性 1 设置div为可编辑状态,则可点击获取焦点,同时div的内容也是可以编辑的:如: <div contenteditable="true"></div> .dom1, .dom2, .dom3 { color: black; width: 400px; height: 30px; border: 1px solid red; margin:

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

css中的clear:both,display:flex;

介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. ----------------------------------------------------------- 先上两张图,然后慢慢道来...... 第一张是实现的布局,第二张是布局的代码.简单的说明一下:图一中有4块为classname为newsItem的div容器(代码有点乱看起来有点吃力),这4个容器包含在classname为newsRow的sec

HTML/CSS:display:flex 布局教程

网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写