Publishing/CSS3

dd

oodada 2020. 10. 20. 13:19

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>flex : css</title>

<style>

ul {

background: lightpink;

}

li {

display: block;

width: 100px;height: 100px;

margin: 10px;

text-align: center;

line-height: 100px;

background: #fff;

}

</style>

</head>

<body>

<h1>flex</h1>

<style>

.flex-1 {

display: flex;

}

</style>

<ul class="flex-1">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<style>

.flex-2 {

display: flex;

flex-direction: column;

}

</style>

<ul class="flex-2">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

 

<ul class="flex-3">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

 

</body>

</html>

'Publishing > CSS3' 카테고리의 다른 글

css의 기초 - css 배우기  (0) 2023.11.29
네이밍 가이드(Naming Guide) - css 배우기  (0) 2023.11.26
웹폰트 만들기  (0) 2020.10.08
이미지 해상도 분기대응  (0) 2020.10.05
Image Guide  (0) 2020.08.05
티스토리 친구하기