1，今天遇到一个问题，就是当元素布局设置为了flex后，里面的内容只有文字，但是对text-align 属性设置无效，仔细想了下，是因为把display 设置为了flex后，flex将里面的文字也认为是一个子元素（其实就是子元素。。只不过是文字节点而已），子元素布局可以通过align-items 设置Y轴，justify-content 设置X轴的对齐方式（假如flex-flow 设置为了row wrap后）。

那么在这种情况下，元素设置为flex后，文字节点是不能通过设置text-align居中的。

如果要设置居中的话，可以通过justify-content:center 来设置，如果硬要通过text-align设置，那么要将flex去掉才行。

flex 布局笔记的更多相关文章

  1. flex布局笔记整理

    flex布局笔记整理 了解-webkit-box 利用postcss进行css代码的向后兼容时,display:flex兼容后的代码常会带有display:-webkit-box. 部分移动端内核较低 ...

  2. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  3. flex布局笔记

    flex布局: 容器: 容器主轴方向: 项目的主轴对齐方式: space-between:两端对齐,项目之间的间隔都相等. space-around:每个项目两侧的间隔相等.所以,项目之间的间隔比项目 ...

  4. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  5. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  6. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  7. Flex布局学习笔记

    任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...

  8. Flex 弹性布局——笔记

    将容器指定为Flex布局 display:flex -->d-flex display:-webkit-flex /*Safari*/ *float clear vertical-align失效 ...

  9. css布局笔记（二）Flex

    flex Flex是"Flexible Box"的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可指定为Flex布局. .box{di ...

随机推荐

  1. [翻译]Apache Spark入门简介

    原文地址:http://blog.jobbole.com/?p=89446 我是在2013年底第一次听说Spark,当时我对Scala很感兴趣,而Spark就是使用Scala编写的.一段时间之后,我做 ...

  2. 自适应备忘录 demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. 更改Visual Studio 2015 默认的语言设置

    Vs支持多种语言,但有可能创建项目时,默认的开发语言不是你需要的,比如:默认是Visual C++ 你可以通过"工具"----选项----导入和导出设置来修改. 引用: https ...

  4. yum使用点滴

    yum下载依赖rpm包 先安装一个yum-downloadonly 1 yum install yum-downloadonly完成安装后,yum –help在最后就提示两个命令参数,分别是: Plu ...

  5. 实用控件分享：自定义逼真相机光圈View

    最近手机界开始流行双摄像头,大光圈功能也应用而生.所谓大光圈功能就是能够对照片进行后期重新对焦,其实现的原理主要是对拍照期间获取的深度图片与对焦无穷远的图像通过算法来实现重新对焦的效果. 在某双摄手机 ...

  6. RMAN异机恢复遭遇ORA-01547、ORA-01152、ORA-01110错误案例

    测试环境:     操作系统  :  Red Hat Enterprise Linux ES release 4 (Nahant Update 4)   VMWARE     数据库     :  O ...

  7. Symantec Backup Exec Agent For Linux防火墙问题

    如果在Unix或Linux安装配置好了Symantec Backup Exec Agent For Linux,但是在Symantec Backup Exec服务端无法访问Symantec Backu ...

  8. 服务器重启后SQL Server Agent由于"The EventLog service has not been started" 启动失败

    案例环境: 操作系统   : Microsoft Windows Server 2003 Standard Edtion SP2 数据库版本 : SQL Server 2005 Standard Ed ...

  9. Oracle逻辑结构（TableSpace→Segment→Extent→Block）

    一.逻辑体系结构图 二.逻辑结构图组成介绍 从上表可以看出,一个数据库是由多个表空间(tablespace)组成,一个表空间又由多个段(segment)组成,一个段又由多个区(extent)组成,一个 ...

  10. Oracle 12.1.0.2 New Feature翻译学习【In-Memory column store内存列存储】【原创】

    翻译没有追求信达雅,不是为了学英语翻译,是为了快速了解新特性,如有语义理解错误可以指正.欢迎加微信12735770或QQ12735770探讨oracle技术问题:) In-Memory Column ...