CSS 居中小结

行内元素居中:

     常用的行内元素比如文本、图片、按钮等,可以通过给父元素添加一个:text-align:center;

块元素居中:

     给块元素添加一个固定的宽度,然后把块元素的左右外边距都设置成auot:margin-left:auto;margin-right:auto;(常用)

使用flex:

    特点:

            1.块级布局侧重垂直方向、行内布局侧重水平方向,flex布局是与方向无关的。

            2.flex布局可以实现空间自动分配、自动对齐(flexible:弹性、灵活)

            3.flex适用于简单的线性布局,更复杂的布局要交给grid布局(还没发布)

    Flex-container的属性(父元素)

            1.flex-direction方向  (控制容器里面的的元素方向,是水平(row)还是垂直(column))

            2.flex-wrap换行 (默认是:flex-wrap:nowrap;如果父元素中子元素的宽度超过了容器,默认子元素不换行;flex-wrap:wrap;如果子元素的宽度超过了父元素容器,子元素会换行显示;)

            3.flex-flow上面两个的简写

            4.justify-content主轴方向对齐方式 (父元素设置成:justify-content:center;里面的子元素会居中显示;)

            5.align-items侧轴对齐方式

            6.align-content多行/列内容对齐方式(用的较少)

    Flex item的属性(子元素)

           1.flex-grow增长比例(空间过多时)

           2.flex-shrink收缩比例(空间不够时)

           3.flex-basis默认大小(一般不用)

           4.flex上面三个的缩写

           5.order顺序(代替双飞翼)

          6.align-self自身的对齐方式(用的较少)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,665评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,548评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • CSS 3中弹性盒布局的最新版概述 在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模...
    吾名无双阅读 1,255评论 0 5
  • 曾几何时,还是无忧无虑的童年,少年,转瞬之间就到了青年。现在已经不再无忧无虑了,想的事情多了起来随即烦恼也就多了起...
    雨霖铃风阅读 263评论 0 0