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. 【转】窗口之间的主从关系与Z-Order

    原文链接:http://www.cnblogs.com/dhatbj/p/3288152.html 说明:这是本人2008年写的一篇旧文,从未公开发表过.其中除了一小段描述Window Mobile平 ...

  2. 转载：C#中的泛型

    泛型(generic)是C#语言2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确定一个或多个具 ...

  3. AMD and CMD are dead之KMD.js依赖可视化工具发布

    使用 require("MyAapp.DepTree", function (DepTree) { DepTree(({ renderTo: "holder", ...

  4. ArcGIS中国工具应用:固定比例尺固定纸张批量打印

    ArcGIS中国工具应用:固定比例尺固定纸张批量打印 下载地址:http://files.cnblogs.com/files/gisoracle/a3batchprint.zip 固定A3,比例尺1: ...

  5. iOS开发之功能模块--长方形UIImage截取中间最大正方形区域

    这里直接用CoreGraphics的一些处理图片的方法,本身不难,但是有些时候用的不多,就会遗忘掉使用方法的细节.下面就直接展示关键源码,以便下次重复需求,就可以立马找回. 该方法中在UIImage的 ...

  6. java数组的常用函数

    import java.util.*; class 数组索引{ public static void main(String args[]){ //数组中的使用工具:Arrays int[] arr ...

  7. Java调优知识汇总

    查看java进程运行状况jps -lvm 查看java默认堆大小 java -XX:+PrintFlagsFinal | grep MaxHeapSize eclipse调试设置vm参数 在项目上右键 ...

  8. TFS 10周年生日快乐 – TFS与布莱恩大叔的故事

    今天看了一下Brian Harry大叔的博客,才发现2016年3月17日,是Team Foundation Server的10岁生日. Today marks the 10th anniversary ...

  9. .NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查（实战）

    Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为必知必会.尽管这一系列是使用.NET/C# ...

  10. MonjaDB —— 基于 Eclipse 的 MongoDB GUI 客户端工具(转载)

    原文链接http://www.oschina.net/question/12_59707 MonjaDB 是一个 MongoDB 的 GUI 客户端工具,提供直观的 MongoDB 数据管理的功能,支 ...