>  기사  >  웹 프론트엔드  >  CSS3 레이아웃 속성 flex 사용에 대한 자세한 소개

CSS3 레이아웃 속성 flex 사용에 대한 자세한 소개

高洛峰
高洛峰원래의
2017-03-16 09:42:571681검색

이 글에서는 CSS3 레이아웃속성flex의 사용법을 자세히 설명합니다

html 코드는 다음과 같습니다.


<ul class="ul_box">
    <li><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">javascript</a></li>
    <li><a href="#">html5</a></li>
    <li><a href="#">css3</a></li>
    <li><a href="#">jquery</a></li></ul>


CSS 코드는 다음과 같습니다.


.ul_box{
    margin:0;
    padding: 0;
    list-style: none;    /*display: flex将对象作为弹性伸缩盒显示;
    flex-flow:flex-direction(确定弹性子元素排列方式)和
              flex-wrap(当弹性子元素超出弹性元素容器范围时是否换行)的复合属性,
    写入父容器里;    */
    display: flex;
    flex-flow: row wrap;
}.ul_box li{
    text-align: center;
    height:40px;
    line-height: 40px;    /*flex:flex-grow(设置弹性子元素的扩展比率)
     *        flex-shrink(设置弹性子元素的收缩比率)
     *        flex-basis(指定弹性子元素伸缩前的默认大小值,相当于width和height属性。)
     * 这三种属性的复合属性,写入子容器里;*/
    flex: 1 1 100%;
}.ul_box li a{
    text-decoration: none;
    color:#fff;
}.ul_box li:nth-child(1){
    background: #008000;
}.ul_box li:nth-child(2){
    background: #4169E1;
}.ul_box li:nth-child(3){
    background: #8A2BE2;
}.ul_box li:nth-child(4){
    background: #A52A2A;
}.ul_box li:nth-child(5){
    background: #FFA500;
}.ul_box li:nth-child(6){
    background:#9ACD32;
}@media (min-width:480px ) {
    .ul_box li{
        flex: 1 1 50%;
    }}
@media (min-width:768px ) {
    .ul_box{
        flex-flow: row nowrap;
    }}


다음 6가지 속성이 컨테이너에 설정됩니다. :

  • flex-direction 컨테이너의 항목 배열 방향(기본 가로 배열)

  • flex-wrap 항목의 포장 방법 컨테이너

  • flex-flow 위 두 속성의 약어

  • 그냥ify-content 의 정렬 주축의 항목

  • align-items  항목이 교차축에 정렬되는 방식

  • align-content  여러 축의 정렬을 정의합니다. . 프로젝트에 축이 하나만 있는 경우 이 속성은 효과가 없습니다.

컨테이너에 있는 항목 속성:

  • order  项目的排列顺序。数值越小,排列越靠前,默认为0。

  • flex-grow  项目的放大比例,默认为<code>0, 즉, 남은 공간이 있으면 확대되지 않습니다.

  • flex-shrink 항목의 축소 비율, 기본값은 1입니다. 즉, 공간이 부족할 경우 항목이 축소됩니다. <code>flex-shrink  项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

  • flex-basis 초과 공간을 할당하기 전 항목이 차지하는 주축 공간(<a href="http://www.php.cn/wiki)%20/%20646.html" target="_blank">기본<code>flex-basis  在分配多余空间之前,项目占据的主轴空间(<a href="http://www.php.cn/wiki/646.html" target="_blank">main</a> size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为<code>auto 크기). 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다.

  • flex  是<code>flex-growflex는 <code>flex-grow<code>flex-shrink, flex-shrink<code>flex-basisflex-basis 약어로, 기본값은 <code>0 1 auto<code>0 1 auto입니다. 마지막 두 속성은 선택 사항입니다.

  • align-self  <code>align-items<code>align-self  允许单个项目有与其他项目不一样的对齐方式,可覆盖<code>align-items 속성을 ​​재정의하여 단일 항목이 다른 항목과 다른 정렬을 가질 수 있도록 허용합니다. 기본값은 auto<code>auto입니다. 이는 상위 요소의 align-items<code>align-items 속성을 ​​상속한다는 의미입니다. 상위 요소가 없으면 스트레칭stretch.

위 내용은 CSS3 레이아웃 속성 flex 사용에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.