코딩/CSS Flex와 Grid 제대로 익히기
Flex 핵심정리 #7 - 유용한 기법들
yesman9
2024. 10. 15. 16:51
이 게시글은 [CSS Flex와 Grid 제대로 익히기]의 강의를 보며 정리한 내용입니다.
CSS Flex와 Grid 제대로 익히기 강의 | 1분코딩 - 인프런
1분코딩 | 현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다., 당신이 웹 퍼블리셔, 프론트엔드 개발자, 코딩하는 디자이너라면?이젠 Flex와 Grid를 배워
www.inflearn.com
출처: https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
studiomeal.com
막간 tip) margin: auto
margin: auto;
남아있는 마진을 모두 점유.
박스 가운데 정렬할 때 많이 사용
margin: 0 auto; /* 좌우정렬 */
양쪽 고정폭, 가운데 가변폭의 레이아웃 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Flex</title>
<link rel="stylesheet" href="default.css">
<style>
.flex-container {
display: flex;
}
.flex-item:nth-child(1) {
width: 150px;
flex-shrink: 0; /* width보다 줄어들지 않음*/
}
.flex-item:nth-child(2) {
flex-grow: 1; /* 빈 공간을 늘려서 채워줌 */
}
.flex-item:nth-child(3) {
width: 200px;
flex-shrink: 0; /* width보다 줄어들지 않음*/
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, nulla eaque officiis eligendi ullam hic temporibus corrupti ducimus sunt! Aut quae rem nobis dolores facilis repudiandae qui, possimus rerum error veritatis quidem blanditiis quia nesciunt? Fugit veritatis quaerat consectetur quam est, sed sint quae vitae velit vel dolorem cumque illum.</div>
<div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, nulla eaque officiis eligendi ullam hic temporibus corrupti ducimus sunt! Aut quae rem nobis dolores facilis repudiandae qui, possimus rerum error veritatis quidem blanditiis quia nesciunt? Fugit veritatis quaerat consectetur quam est, sed sint quae vitae velit vel dolorem cumque illum.</div>
<div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, nulla eaque officiis eligendi ullam hic temporibus corrupti ducimus sunt! Aut quae rem nobis dolores facilis repudiandae qui, possimus rerum error veritatis quidem blanditiis quia nesciunt? Fugit veritatis quaerat consectetur quam est, sed sint quae vitae velit vel dolorem cumque illum.</div>
</div>
</body>
</html>
풋터를 바닥에 붙이기
flex-direction: column을 이용해 축을 세로축으로 바꾸고,
min-height: 100vh를 이용해 늘어날 자리를 만들어주고,
content의 길이를 flex-grow: 1을 이용해늘려준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Flex</title>
<link rel="stylesheet" href="default.css">
<style>
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
overflow: auto;
flex: 1 auto;
padding: 1.5rem;
}
</style>
</head>
<body>
<div class="page">
<header class="header flex-item">header</header>
<section class="content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis voluptates laudantium quam delectus dolore maiores hic! Qui, quos neque voluptates esse maxime voluptatibus similique, ipsum expedita, iusto nostrum odit tempore accusamus atque exercitationem distinctio consequatur quibusdam odio aliquid harum veniam? Corrupti reiciendis at fugiat recusandae perspiciatis est neque impedit dolore earum exercitationem, fuga possimus, molestias dolorem? Atque ea asperiores ullam fugiat animi laudantium natus autem pariatur provident at, eum, corporis accusamus illo quasi. Recusandae nesciunt vel culpa? Quaerat commodi delectus totam voluptate optio neque soluta nihil obcaecati deleniti facilis sed est quos, et ipsa consequatur natus adipisci, doloribus maiores eum autem ut! Ab rerum inventore quisquam autem magni porro culpa facere delectus dolorem nam officia, placeat sapiente eveniet quasi temporibus labore exercitationem magnam voluptatem at et hic, alias odit. Cumque animi optio iste aperiam. Consequuntur, veniam repellendus quae unde saepe, rem quidem praesentium sunt, quibusdam debitis autem voluptas enim quia eveniet illum quasi sit obcaecati? Suscipit recusandae quam incidunt, reiciendis tempore quasi debitis delectus quas fugiat totam laboriosam qui temporibus ut iure. Possimus natus, perspiciatis pariatur voluptates voluptatibus cupiditate minus ex ut vitae beatae eum nobis explicabo, obcaecati labore ipsam temporibus aliquam aut quae est vero fugit rem dolor quod laboriosam. Magnam neque minima repudiandae optio provident obcaecati repellat odit iste natus facere, alias rem reiciendis excepturi ad eos sed inventore similique. Assumenda asperiores animi magni obcaecati unde qui error, suscipit pariatur aperiam delectus repellendus ut facere voluptatibus blanditiis beatae, aspernatur odio sit aliquid quis iusto similique at consequatur nihil. Inventore consectetur illo quaerat, iste ducimus reprehenderit eos! Illo velit temporibus dolorem in, vel assumenda numquam nesciunt minima reiciendis et, aspernatur libero provident laborum a qui facilis vero eius id sapiente magnam! Modi nostrum nobis omnis blanditiis enim quaerat quo saepe commodi, libero a ex autem optio perspiciatis temporibus ipsa quis explicabo dolor eius magnam animi sed mollitia facere. Fugit dolorum ab, nemo dolores quod molestiae voluptatum dicta et explicabo similique aut soluta. Doloremque quisquam non magnam aperiam. Distinctio ullam incidunt et saepe nesciunt aut cum neque minus. Veniam saepe, officiis nulla velit provident voluptatem nobis. Beatae, facilis dolore velit incidunt enim magni, temporibus natus dignissimos nesciunt dolorem quia quod libero molestias sed expedita, officiis suscipit? Ducimus in reprehenderit eveniet, quibusdam fugiat quia recusandae non dignissimos cupiditate tenetur ad ipsum hic inventore sit maiores animi error pariatur minima? Aut quos et, tempore, soluta autem blanditiis pariatur magni repellendus debitis illo odit placeat natus. Ullam eum omnis nulla odio hic nobis sequi, deleniti et qui necessitatibus blanditiis dolor saepe iste sed fuga voluptatem porro cupiditate aspernatur possimus perspiciatis magni, ipsa cumque? Dolor amet error voluptatibus possimus. Odit quibusdam odio amet numquam iste accusamus placeat recusandae delectus illum, ipsam repellendus blanditiis laboriosam expedita sint dolorem dolorum tempore mollitia nobis nisi vero asperiores enim et dicta fuga. Delectus facilis, rerum ea corporis dicta a, aut expedita tempora mollitia eveniet deserunt nesciunt dolores harum soluta id dolore. Vero harum debitis aspernatur dicta cupiditate? Quam error reprehenderit doloribus vitae dolorum eaque, ullam quo odio nostrum ad! Accusamus sint qui repellat necessitatibus reprehenderit expedita minima earum nihil, fuga itaque quas magni eaque cupiditate laboriosam placeat, id maxime mollitia obcaecati. Alias sequi necessitatibus voluptates quidem perspiciatis est eaque dolores similique voluptatum iusto sunt debitis expedita minima suscipit velit libero eius, distinctio rem unde dignissimos a incidunt dicta nulla! Repudiandae magnam quae recusandae libero. Est maiores, laudantium esse dolorum fuga qui. Quidem velit vero obcaecati soluta aut natus quaerat ex voluptatibus officiis, incidunt omnis repudiandae voluptates minima deserunt asperiores quisquam hic fugiat nostrum nisi iure ad! Eligendi voluptas facilis deserunt. Deserunt ea explicabo neque quidem fugit distinctio enim velit iusto? Officiis molestiae molestias vero atque minima possimus tenetur consequatur quis neque, asperiores explicabo omnis nesciunt, provident rerum corporis debitis quasi? Perferendis repellat nostrum voluptatem officia vel aliquid animi corrupti perspiciatis sint sapiente nam dolorum, eligendi aperiam quas maxime, adipisci iusto? Nam assumenda illum, magnam itaque tenetur exercitationem totam, consequuntur ipsum similique quos iure commodi cum saepe esse iusto quas quam eos maiores quae eum nisi nulla inventore minus! Sint facere nostrum possimus, tempora aspernatur obcaecati at eius dolor esse ratione. Quia, culpa explicabo eveniet assumenda nisi quam amet temporibus cumque, libero soluta magni perspiciatis repellat, eaque doloremque expedita saepe deserunt animi quis. Sed tempora vitae architecto sapiente distinctio tempore. Quis et beatae molestias, accusamus incidunt veritatis quia recusandae doloribus sequi libero reiciendis voluptatibus dolor eum quam accusantium non aliquid? Nulla ratione veniam aspernatur id hic maxime illo nemo adipisci explicabo, velit, maiores harum pariatur natus laboriosam quis, repellendus unde odio consequatur beatae veritatis eaque quia dolores magni aut? Praesentium nemo corporis ab enim doloribus facere voluptatem voluptates, cumque eos at quidem. Tenetur exercitationem nostrum aliquid quisquam amet beatae, est rerum molestias aspernatur vel voluptatem optio ipsum ipsa accusantium sit reiciendis facere adipisci quas animi similique neque aliquam error labore culpa. Ipsam labore harum culpa distinctio, cupiditate cum soluta dignissimos corporis possimus aliquid cumque eligendi voluptatum quas expedita eos ad rerum? Facilis voluptatum consequuntur repudiandae sunt, cum esse, excepturi et iste maxime corporis at doloremque, voluptatibus dignissimos aspernatur quia nulla dolores dolorem? Neque, eaque quisquam? Sed impedit, officiis atque incidunt tenetur corrupti necessitatibus voluptatum ipsam ipsum praesentium repudiandae quaerat eaque saepe exercitationem fugit provident recusandae, sequi porro laboriosam eligendi, voluptas facilis id et. Iste veritatis saepe quidem architecto aspernatur officia placeat tempore eos, amet libero quaerat sed vero et quis aperiam delectus ea dicta sint non perspiciatis! Sit fugit magnam, reiciendis et inventore a molestias blanditiis. Blanditiis magni aliquid repellat tempora quam voluptatibus omnis repudiandae saepe corporis doloremque, accusantium cupiditate, dicta iusto deleniti dolorem quibusdam distinctio maiores molestias veniam voluptates nemo pariatur praesentium! Ipsa a odio fuga impedit excepturi expedita commodi at, sit, repellendus ullam fugit! Consectetur quis aperiam sapiente veniam nulla reprehenderit fuga? Dolore dolor harum nam unde voluptates, accusamus quasi quas? Iste, necessitatibus! Itaque quam laudantium autem, consectetur tenetur laboriosam expedita veniam iure neque sed minus porro nam optio, at quaerat vero nisi, adipisci dolore hic nulla! Minima, veniam molestias! Ad, doloribus modi. Iure soluta recusandae cum quaerat aperiam assumenda dolorum deserunt repudiandae autem voluptas, necessitatibus maxime omnis sapiente placeat sed molestiae blanditiis fugiat exercitationem aut quod repellendus culpa dicta molestias a! Voluptatum magnam officia dignissimos itaque laudantium in fugit quis obcaecati reprehenderit, cumque libero error. Accusamus in deserunt aliquam veritatis porro earum vero animi laudantium sequi! Nostrum distinctio expedita, incidunt ex ad optio minus suscipit odio temporibus tenetur harum consectetur natus quas voluptate omnis, at necessitatibus deserunt vel laudantium in? Necessitatibus minima quaerat at repellendus placeat laborum eum impedit libero sed earum quos quas delectus illum quo molestias voluptatem, sint reprehenderit maxime alias excepturi. Nostrum pariatur expedita deleniti saepe aut dicta minus veritatis alias eos quo culpa aspernatur voluptate animi at inventore ducimus harum quis ipsa, error atque ex repellat cupiditate corporis totam! Eaque quibusdam eveniet, ab doloremque iure in laboriosam ea dolorem voluptatum maiores laudantium beatae velit dolores sed distinctio eos veritatis necessitatibus ipsam hic. Sit cumque numquam ipsum! Sint similique, beatae saepe ducimus est officia veritatis. Ad asperiores inventore placeat et molestias, atque corporis enim incidunt suscipit adipisci temporibus quia magnam doloribus minus fugiat cupiditate facilis quae consectetur quod. Facere, ducimus quisquam? Quam, a ab! Itaque aperiam quod natus quibusdam, accusantium ut eos, perspiciatis eaque debitis vero ullam impedit reprehenderit assumenda cum dolorem facilis amet quasi facere possimus illum? Modi quo, magnam sit, quos enim dolorem beatae illo expedita a voluptatum non? Suscipit sequi velit aliquam non temporibus cumque asperiores animi. Obcaecati quasi laudantium odio exercitationem magni modi explicabo at, omnis eligendi quia impedit totam debitis sint amet quibusdam optio veniam harum. Placeat, officiis iste quam odio culpa quibusdam sapiente ad facilis mollitia, natus et nesciunt debitis unde distinctio illum nostrum dolor veniam ut recusandae dignissimos sunt voluptate voluptates? Expedita fugiat saepe exercitationem quod! Iusto consectetur architecto inventore et nihil at hic reprehenderit officiis rem unde magnam quisquam, ad delectus eum ex repellendus quo, eaque mollitia aut sequi dolorum perferendis maxime fugiat nam? Ratione facere explicabo adipisci rerum id est! Doloremque assumenda, dolores similique qui ducimus ex animi fugiat ipsa maxime nostrum temporibus, debitis id mollitia nesciunt quod vel at sequi unde magni ullam! Pariatur libero rerum quia nulla, obcaecati suscipit voluptatem enim mollitia quaerat doloremque ipsa quas similique laborum iusto ratione, quae quod sint. Officiis, fuga. Ad, eum dignissimos dolorum hic amet ducimus et qui, accusantium incidunt omnis cupiditate commodi laboriosam, molestias sapiente tempora repellat temporibus atque illo enim soluta quibusdam! Quisquam ducimus quo quae dolorum animi reiciendis eaque reprehenderit, quaerat dignissimos suscipit minima laboriosam culpa ex aspernatur tenetur deleniti dolore delectus nostrum inventore voluptatem. Sit consequatur labore ad id ullam atque aliquam voluptatum? Nulla facere obcaecati delectus dolores laudantium optio sint, quod exercitationem recusandae pariatur ea harum magnam maiores odio esse, at quo qui amet officiis facilis illum asperiores autem ducimus! Voluptatem ex cumque accusantium sit at doloribus, veniam voluptatum voluptas quaerat mollitia quo iste ab officiis repellat ipsum quidem odit non eveniet ratione ipsa obcaecati rem cum magni? Nemo quis nulla dolorum nam aperiam dolore. Nulla natus nam eaque blanditiis enim minima unde consectetur, vitae eum itaque maxime obcaecati pariatur eligendi magnam quaerat autem perspiciatis est commodi explicabo quos dolore sequi omnis a fugit! Nobis, assumenda odit aperiam velit quae ad debitis. Molestias impedit molestiae sunt animi rerum ratione odit voluptates harum aut ipsum quo a tempore ullam beatae facere qui neque, perferendis eum amet eveniet quia. Esse atque veritatis quaerat dolorum. Dolore possimus fuga et illum modi. Soluta dolorum necessitatibus libero esse accusamus unde dignissimos nesciunt porro. Maxime sapiente nemo assumenda omnis nostrum laudantium, soluta qui, rem sunt modi iusto quas expedita molestiae asperiores sequi reiciendis consequuntur magni aspernatur ullam eum saepe hic dignissimos ratione possimus. Laboriosam officia praesentium architecto minima optio iste ea! Vero aspernatur doloribus, facere beatae reprehenderit ipsum repellendus amet eveniet soluta aliquid id vitae illum, corrupti expedita est iure! Necessitatibus eligendi doloribus sed alias sit labore perferendis amet aut corporis eum nostrum deleniti aliquid minus atque ad iure quaerat omnis veritatis ut, repudiandae, possimus qui tempora? Aspernatur deserunt minima quaerat commodi amet! Officia nihil sequi veniam totam autem corrupti culpa minima sit, ipsa maiores molestiae tenetur velit, incidunt nesciunt corporis obcaecati distinctio blanditiis. Libero at dolores doloremque obcaecati harum eius optio repellendus ea quae quo soluta est, magnam dolorum perferendis. Ratione iure cum voluptates corrupti, facilis earum eaque error omnis voluptatibus, cumque dicta quibusdam natus distinctio alias saepe commodi numquam eius dolor, similique labore! Ipsam voluptatibus iure quidem! Voluptatem quo ullam libero aut corrupti quae! Aliquam deserunt iusto accusantium, excepturi amet est, magnam mollitia incidunt quo totam recusandae accusamus eum blanditiis doloremque eius repellendus? Sapiente inventore delectus ratione? Voluptates odit vel ex velit maxime cum facilis soluta, iste modi voluptas suscipit perferendis expedita! Eius, id. Nostrum nam minima earum ea, est voluptate iure, mollitia et laudantium a quo iusto explicabo aspernatur sequi vel perspiciatis id, nesciunt natus? Blanditiis numquam, excepturi dolore rem laborum illo soluta impedit veritatis. Cumque quis animi velit eos harum nihil. Sit repellendus, officia temporibus eveniet, libero quia laboriosam reiciendis dignissimos eos aliquid dolor dicta quam tempore reprehenderit. A, consequuntur perspiciatis, reprehenderit nesciunt cupiditate enim non saepe hic quas atque fugit aut autem inventore quis perferendis pariatur dignissimos quos? Consequuntur laudantium aspernatur blanditiis soluta et dolores totam. Dicta optio atque et harum excepturi maiores adipisci repellat rerum, rem sint incidunt sit cumque, ut iusto impedit inventore facilis illo provident iure totam, earum possimus beatae? Maiores, alias enim! Tempore, enim accusamus. Dolore sequi nobis, laudantium praesentium atque modi nisi ducimus eligendi commodi repudiandae. Tempore porro quos nihil qui consequatur rerum dignissimos eligendi facilis molestias nesciunt, sint similique illum reiciendis ad debitis minima, modi, tempora rem culpa saepe. Consequuntur repellendus voluptatibus dolorem facilis, officia, quidem qui temporibus architecto non fugit nihil accusamus alias distinctio quasi quaerat fuga totam impedit, optio eveniet ullam? Nobis, earum aperiam ut perferendis assumenda excepturi cumque consequatur ullam quod libero ratione accusantium quas! Praesentium nesciunt, eos nisi suscipit deserunt ab, eligendi ad inventore perferendis asperiores laboriosam nobis velit officiis. Libero tempora eveniet quae magni atque temporibus excepturi ipsam quibusdam placeat voluptates.
</section>
<footer class="footer flex-item">footer</footer>
</div>
</body>
</html>
IE 버그
min-height 관련해서 정렬 버그가 있다
> height를 쓸 것
overflow: auto;