# Flexbox

38개의 포스트
post-thumbnail

[css] Flex Box로 layout 구성하기

기본적으로 콘텐츠의 흐름은 좌에서 우로, 위에서 아래로 흐른다. 먼저 수직으로 분할하고, 수직으로 분할된 div에서 height 속성을 이용해 수평 분할을 하는 것이 좋다. Flexbox로 레이아웃 잡기 flexbox 레이아웃은, 말 그대로 박스를 유연하게 늘리고 줄

2021년 3월 31일
·
0개의 댓글
post-thumbnail

[css] flexbox

flexbox를 알아보자.

2021년 3월 29일
·
0개의 댓글

TIL_210312

Today I Learned 알고리즘... 리를빗.. flexbox (css) Flex Flex(또는 Flex)는 레이아웃 배치를 위해 고안된 CSS 속성으로, flex container와 그 하위 항목인 flex items으로 구성된다. flexbox에는 main axis(주축)와 cross axis(주축에 수직인 축) 두개의 축이 있으며, 축의 방향...

2021년 3월 14일
·
0개의 댓글
post-thumbnail

TIL 04 Flexbox

편해보이지만 막상 쓰려면 골치아프던 Flexbox! 오늘은 김버그님의 강의를 바탕으로 개념을 제대로 정리해보려한다!!😎

2021년 3월 10일
·
1개의 댓글
post-thumbnail

Flexbox에서 마지막 박스만 오른쪽으로 붙이기

margin-left: auto;를 줌으로써 오른쪽 끝에 오게 한다. 참고: https://medium.com/@iamryanyu/how-to-align-last-flex-item-to-right-73512e4e5912

2021년 2월 10일
·
0개의 댓글

flexbox 공부허자

학원에서는 백엔드 중심이었기 때문에 flexbox에 대해 언급하지 않고 넘어갔다. 그래서 flexbox에 대해 잘 알지 못하고 padding, float을 남발해왔는데.... 다른사람들 다 알았는데 나만 몰랐다. 하핳이번에 제대로 정리해서 머리에 박아둬야지.. 엘리님의

2021년 2월 9일
·
0개의 댓글
post-thumbnail

TIL 05 | CSS Layout (Flexbox)

CSS3에 새롭게 flexbox 레이아웃 방식이 등장하기 이전에는, 기존에 존재했던 position, float,table 등의 속성을 이용하여 웹페이지의 레이아웃을 구현하였다.하지만 이 속성들은 구현 방법이 복잡하고 시간 소요가 컸고, 정확하게 원하는 내용을 구현하기

2021년 2월 9일
·
0개의 댓글

flexbox

container 에 적용할 수 있는 속성 값이 존재한다. container 는 item 으로 구성되어 있다. 중심 축(main axis) 가 수평, 수직이냐에 따라서 cross axis가 달라지고, 배치가 달라진다. Flexbox Froggy 게임Material De

2021년 2월 8일
·
0개의 댓글
post-thumbnail

CSS | flexbox

아래 값들을 인자로 받아 요소를 가로선 상에서 정렬flex-start: 요소들 정렬 ⇒ 컨테이너의 왼쪽flex-end: 요소들 정렬 ⇒ 컨테이너의 오른쪽center: 요소들 정렬 ⇒ 컨테이너의 가운데space-between: 요소들 사이 ⇒ 동일한 간격space-

2021년 1월 17일
·
0개의 댓글
post-thumbnail

[TIL] CSS 3: Flexbox

Codecademy Learn CSS 학습

2021년 1월 16일
·
0개의 댓글

[TIL] CSS: flexbox

#TIL #flexbox #main axis #cross axis #justify-content #align-items #flex-direction #개구리게임

2021년 1월 11일
·
0개의 댓글

TIL #9

CSS Selector CSS 박스모델이란? margin: 바깥 여백 border: 테두리 padding: 안쪽 여백 width: 박스의 가로크기 height: 박스의 세로 크기 background: 박스의 배경 box-sizing: 박스의 크기 기준 절대단위 &

2021년 1월 8일
·
0개의 댓글
post-thumbnail

TIL 13 | CSS Flexbox Space

flexbox 간 공백을 주는 방법으로 justify-content와 align-content의 space-속성값을 이용할 수 있다.jusity-content가 중심축을 기준으로 하는 배치 방식을 결정한다면align-content는 반대축을 기준으로 하는 배치 방식을

2021년 1월 7일
·
0개의 댓글
post-thumbnail

TIL 12 | CSS Flexbox (flex-direction & justify-content)

flexbox 배치 방향을 결정하는 방식, 아이템을 배치하는 방식 적용 예시

2021년 1월 7일
·
0개의 댓글
post-thumbnail

TIL #5 : [CSS] Flexbox

쉽게 정렬하자!

2020년 12월 8일
·
0개의 댓글
post-thumbnail

[HTML / CSS] FlexBox 정복하기 3

마지막으로, flex-grow flex-shrink flex-basis를 통해 브라우저 크기가 커지거나 작아질때 요소의 크기도 변화할 수 있도록 만들어보자. 그리고 진짜 진짜 마지막으로 FLEXBOX FROGGY(https://flexboxfroggy.com/

2020년 11월 27일
·
0개의 댓글
post-thumbnail

[HTML / CSS] FlexBox 정복하기 2

flexBox 중 요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로 정렬하는 방법을 알아보자. 축의 방향으로 요소들을 정렬시켜준다. (기본값)justify-content: flex-first;justify-c

2020년 11월 27일
·
0개의 댓글
post-thumbnail

[HTML / CSS] FlexBox 정복하기 1

flex box를 생성하고(display: flex;), 요소들의 방향을 설정해주고 (flex-direction),요소들을 다음줄로 넘겨주는 방법 (flex-wrap) 까지 알아보자. MDN에서 가져온 flex model오늘 사용한 기본 코드는 아래와 같다. 기본 ht

2020년 11월 27일
·
0개의 댓글

CSS flexbox

css에서 강력한 정렬기능을 제공하기 위해 고안되었다. 두 개의 축에 대해 명확히 이해해야 정확히 다룰 수 있다. nowrap : 부모 박스 사이즈에 맞춰서 강제로 자식 요소 사이즈를 줄여서라도 무조건 한줄로 정렬됨.: flex-direction 으로 지정된 메인 축

2020년 10월 25일
·
0개의 댓글

2020SEPT10-12(Final Project 06, CSS, flexbox, 반응형웹, styled-component, tips)

이번 프로젝트를 기획할 때에, 팀원들과 회의를 통해 구체적인 디자인을 기능 구현이 어느 정도 끝나갈 때쯤 시작하자는 의견이 나와서 그동안 기능 구현에 집중하고 이번 주부터 차근차근 css를 만져보았다. 프로젝트 기획 때부터 깔끔한 디자인을 생각했었고, 그에 맞춰서 cs

2020년 9월 12일
·
0개의 댓글