flex 레이아웃 위아래 좌우 가운데

5561 단어
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <style type="text/css">
        .box{
            display: flex;
            width: 100%;
            height: 500px;
            border: 1px solid #333;
            flex-direction: row;  /*         */
            justify-content: center; /*           */
            align-items: center; /*               */

        }
        .cont{
            width: 30%;
            height: 100px;
            border: 1px solid red;
            flex-grow:1;/**/
            
            
        }




    style>
head>
<body>
    <div class="box">
        <div class="cont">aaaaadiv>
        <div class="cont">aaaaadiv>
    div>
body>
html>

 
전재 대상:https://www.cnblogs.com/jinsuo/p/7724142.html

좋은 웹페이지 즐겨찾기