理解flex_对齐

容器属性:

　　左右对齐方式：justify-content:flex-start/flex-end/center/space-between/space-around;

　　上下对齐方式：align-items:flex-start/flex-end/center/baseline/stretch　　

项目属性：

　　align-self:flex-start/flex-end/flex-center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            display:flex;
            display:-webkit-flex;
            /*flex-direction:row;*//*默认*/
            /*-webkit-flex-direction:row;*/
            justify-content:center;/*子元素居中对齐*/
            /*align-items:center;!*在400的高度中竖向对齐*!*/
            height:400px;
            border:5px solid red;
        }
        .container .ch{width:200px;height:200px;border:10px solid green;color:green;}
        .ch:nth-child(1){
            align-self:flex-start;/*默认default*/
        }
        .ch:nth-child(2){
            align-self:flex-end;
        }
        .ch:nth-child(3){
            align-self:center;
        }
    </style>
</head>
<body>
<h1 style="color:red;">
    .container{display:flex;display:-webkit-flex;justify-content:center;}
</h1>
<div class="container"><!--注意container要有高度。子元素的align-self才有意义。-->
    <div class="ch">align-self:flex-start</div>
    <div class="ch">align-self:flex-end</div>
    <div class="ch">align-self:flex-center</div>
</div>
</body>
</html>
时间： 2024-10-05 02:42:20

理解flex_对齐的相关文章

关于字节对齐的理解

字节对齐的剖析 一.需要了解的名词和概念 1.数据类型自身的对齐值:即数据本身所占字节长度. 2.结构体或类的自身对齐值:即其中数据成员类型对齐值的最大值. 3.指定对齐值:由编程人员通过#pragma pack(value)指定的value值,通过#pragma pack()代码解除. 4.结构体.类.数据成员的有效对齐值:即2.3以及当前计算机总线长度三者的最大值. 5.圆整: 即结构体成员变量占用总长度需要是对结构体有效对齐值的整数倍 以上为理解字节对齐的最基本要求,请耐心看完. 二.CP

（转）CPU Cache与内存对齐

转自:http://blog.csdn.net/zhang_shuai_2011/article/details/38119657 原文如下: 一. CacheCache一般来说,需要关心以下几个方面1)Cache hierarchyCache的层次,一般有L1, L2, L3 (L是level的意思)的cache.通常来说L1,L2是集成 在CPU里面的(可以称之为On-chip cache),而L3是放在CPU外面(可以称之为Off-chip cache).当然这个不是绝对的,不同CPU的做

C++中的内存对齐

内存对齐 在我们的程序中,数据结构还有变量等等都需要占有内存,在很多系统中,它都要求内存分配的时候要对齐,这样做的好处就是可以提高访问内存的速度. 我们还是先来看一段简单的程序: 程序一 #include <iostream> 2 using namespace std; 3  4 struct X1 5 { 6   int i;//4个字节 7   char c1;//1个字节 8   char c2;//1个字节 9 };10 11 struct X212 {13   char c1;//

关于内存对齐

一.内存对齐的初步讲解 内存对齐可以用一句话来概括: "数据项只能存储在地址是数据项大小的整数倍的内存位置上" 例如int类型占用4个字节,地址只能在0,4,8等位置上. 例1: #include <stdio.h>struct xx{        char b;        int a;        int c;        char d;}; int main(){        struct xx bb;        printf("&a

windows和Linux内存的对齐方式

一.内存对齐的初步讲解 内存对齐可以用一句话来概括: "数据项只能存储在地址是数据项大小的整数倍的内存位置上" 例如int类型占用4个字节,地址只能在0,4,8等位置上. 例1: #include <stdio.h> struct xx{ char b; int a; int c; char d; }; int main() { struct xx bb; printf("&a = %p\n", &bb.a); printf("

c/c++深入篇之内存分配与内存对齐的探讨

 不明白内存分配和指针的可以看看,其实这本是我们老师留的一个操作系统科技小论文作业,不知道写什么,干脆把以前收藏的经典C内存分配的文章整理并修改了一下.       此文章有2个用处,1:这是个小论文,格式完整,大家可以复制回去交作业:2:这是整理的经典C内存分配小教程(也加了些我自己的观点),不明白内存分配的可以看看. 还有很重要的一个问题:      这篇文章引用的很多内容我也不知道究竟是出自谁手,知道作者是谁的麻烦告诉下,我好谢谢他.(记得都是csdn里面找的) tag: 操作系统 论

内存补齐序列一：关于内存对齐和填充

这个问题困扰许久,查了许多资料,网上众说纷纭,整理如下: 对于内存补齐的详细情况,请关注下一篇:C/C++ 内存补齐机制 一.内存对齐的初步讲解 内存对齐可以用一句话来概括: "数据项只能存储在地址是数据项大小的整数倍的内存位置上(分别为偶地址.被4整除的地址.被8整除的地址 )" 例如int类型占用4个字节,地址只能在0,4,8等位置上. 例1: #include <stdio.h> struct xx{ char b; int a; int c; char d; };

【转】为什么要内存对齐 Data alignment: Straighten up and fly right

为了速度和正确性,请对齐你的数据. 概述:对于所有直接操作内存的程序员来说,数据对齐都是很重要的问题.数据对齐对你的程序的表现甚至能否正常运行都会产生影响.就像本文章阐述的一样,理解了对齐的本质还能够解释一些处理器的"奇怪的"行为. 内存存取粒度 程序员通常倾向于认为内存就像一个字节数组.在C及其衍生语言中,char * 用来指代"一块内存",甚至在JAVA中也有byte[]类型来指代物理内存. Figure 1. 程序员是如何看内存的 然而,你的处理器并不是按字节

C语言内存浅谈

操作系统的内存分配问题与内存对齐问题对于地层程序设计来说是非常重要的,对内存分配的理解直接影响到代码质量.正确率.效率以及程序员对内存使用情况.溢出.泄露等的判断力.而内存对齐是常常被忽略的问题,理解内存对齐原理及方法则有助于帮助程序员判断访问非法内存.一般c/c++程序占用的内存主要分为以下五种: 1.栈区(stack):系统自动分配,由程序自动创建.自动释放.函数参数.局部变量以及返回值等信息都存在其中 2.堆区(heap):使用自由,不需要预先确定大小.多少情况下需要程序员手动申请.释放.