【Nuxt.js】Nuxt 실천편:Flexbox를 사용하자!
htps //wp. 메 / pc9 HC-TP
전치
CSS에서 자주 사용
flex 속성을 사용해 봅시다 🌟
가로 줄과 중앙 정렬
쉽게 할 수있는 것입니다 💡
시간과 경우에 따라
float보다 편리하고 높은 빈도로 사용합니다 💕
⬇️ 이런 느낌으로 사용합니다 ❣️
index.vuedisplay: flex;
justify-content: space-between;
align-items: center;
MDN : CSS 플렉스 박스 레이아웃
Flexbox란, Flexible Box Layout Module로,
그 이름대로 유연하고 쉽게 레이아웃이 짜 버리는 멋진 상자입니다.
일본어 대응! CSS Flexbox의 치트 시트를 만들었으므로 배포합니다.
지금까지 Nuxt 메인에서
중요한 HTML, CSS
별로 하지 않았기 때문에
조금씩 갑니다 🌱🙋♀️
만드는 것
앞에 놓인 이미지의
카드 부분입니다 🌟
네일 디자인
카드를 이미지합니다 💅❤️
사각형 ◾️에는 이미지가 들어갑니다.
네일 이름과 이미지,
소개문과 태그,
네이리스트의 다른 작품도 일람으로 본다👀
같은 느낌으로하고 있습니다.
⬇️ 링크처
버튼을 누르면 네일리스트의 네일 목록
마찬가지로 카드를 눌러도 네일 목록
태그를 누르면 태그에 해당하는 디자인 목록
구성
그럼 구성을 생각해 봅시다 🤔💭
우선 디렉토리 , 구성 요소에서.
🎈 자세한 내용은 WP에서 확인하세요 👀
htps //wp. 메 / pc9 HC-TP
Reference
이 문제에 관하여(【Nuxt.js】Nuxt 실천편:Flexbox를 사용하자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/aLiz/items/37c0faf7a36643c25751
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
display: flex;
justify-content: space-between;
align-items: center;
앞에 놓인 이미지의
카드 부분입니다 🌟
네일 디자인
카드를 이미지합니다 💅❤️
사각형 ◾️에는 이미지가 들어갑니다.
네일 이름과 이미지,
소개문과 태그,
네이리스트의 다른 작품도 일람으로 본다👀
같은 느낌으로하고 있습니다.
⬇️ 링크처
버튼을 누르면 네일리스트의 네일 목록
마찬가지로 카드를 눌러도 네일 목록
태그를 누르면 태그에 해당하는 디자인 목록
구성
그럼 구성을 생각해 봅시다 🤔💭
우선 디렉토리 , 구성 요소에서.
🎈 자세한 내용은 WP에서 확인하세요 👀
htps //wp. 메 / pc9 HC-TP
Reference
이 문제에 관하여(【Nuxt.js】Nuxt 실천편:Flexbox를 사용하자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/aLiz/items/37c0faf7a36643c25751
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(【Nuxt.js】Nuxt 실천편:Flexbox를 사용하자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/aLiz/items/37c0faf7a36643c25751텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)