ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

关于CSS样式

2021-08-24 01:02:46  阅读:128  来源: 互联网

标签:flex 样式 items align content 关于 wrap CSS 属性


一  去除浮动

1、对父级设置适合CSS高度
2、clear:both清除浮动,但是需要新增一个空的div
3、父级div定义 overflow:hidden
4、父级div也一起浮动
5、父级div定义 display:table

二  居中

1 display: flex; justify-content:center; align-items:Center;

2 float:left; position:relative; right:50%;

3 display: table-cell; vertical-align: middle; text-align: center;

4 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

三  flex 相关

flex-direction / flex-wrap / flex-flow / justify-content / align-items / align-content

1 flex-direction属性:决定主轴的方向(即项目的排列方向)。

flex-direction: row | row-reverse | column | column-reverse;

2 flex-wrap属性 :默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

3 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

flex-flow: <flex-direction> || <flex-wrap>;

4 justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

5 align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

6 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

7 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-grow: <number>; /* default 0 */

8 flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-shrink: <number>; /* default 1 */

9 flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

flex-basis: <length> | auto; /* default auto */

10 align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

标签:flex,样式,items,align,content,关于,wrap,CSS,属性
来源: https://www.cnblogs.com/likedjdsd/p/15178419.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有