«flexbox» 태그된 질문

플렉스 항목이 중앙에 배치되기를 원하지만 두 번째 줄이있을 때 5 (아래 이미지에서)가 1 아래에 있고 부모의 중앙에 배치되지 않도록합니다. 내가 가지고있는 것의 예는 다음과 같습니다. ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } li { list-style-type: none; border: 1px solid gray; margin: 15px; …

91 html  css  flexbox 

보시다시피 list-items첫 번째 row는 동일한 height. 그러나 두 번째 항목 row은 다릅니다 heights. 모든 항목에 유니폼을 입히고 싶습니다 height. 고정 높이 를 제공하지 않고 flexbox 만 사용하여 이것을 달성하는 방법이 있습니까? 여기 나의 code .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { background-color: #ccc; display: flex; padding: …

91 html  css  flexbox 

두 개의 플렉스 항목이있는 플렉스 컨테이너가 있습니다. 두 번째 줄에 여백 상단을 설정하고 싶지만 첫 번째 플렉스 라인이 아닌 래핑 된 경우에만 설정합니다. 가능하다면 미디어 쿼리 사용을 피하고 싶습니다. 첫 번째 요소의 margin-bottom이 해결책이 될 수 있다고 생각했습니다. 그러나 요소를 감싸지 않을 때 하단에 공간을 추가하므로 동일한 문제가 발생합니다. 이것은 …

88 css  margin  flexbox 

컨테이너 내부에는 플렉스 박스를 사용하여 나란히있는 두 개의 요소가 있습니다. 두 번째 요소 ( .flexbox-2)에서는 CSS에서 높이를 설정합니다. 그러나 첫 번째 요소 ( .flexbox-1)는의 높이와 일치합니다 .flexbox-2. .flexbox-1의 높이 일치를 중지 .flexbox-2하고 대신 원래 높이를 유지하려면 어떻게해야합니까? 지금까지 내가 가진 것입니다 ( jsFiddle으로 도 사용 가능 ) .container { display: …

85 html  css  flexbox 

어제 학교에서 CSS 3 flexbox 문을 사용하는 웹 사이트를 얻었습니다. 나는 전에 그것을 사용하지 않았습니다. 그래서 나는 그것을 조금 훑어 보았고 flexbox 문장의 많은 다른 스타일을 발견했습니다. 어떤 사람은 글을 쓰고 display: box;, 어떤 사람은 사용 display: flexbox;하고, 다른 사람도 display: flex;있습니다. 그렇다면 차이점은 무엇입니까? 어느 것을 사용해야합니까?

84 css  flexbox 

목록 태그가있는 그리드 열, 모든 추가 HTML 목록 요소에 대해 자동 너비가 활성화 된 상태에서 3 개의 열마다 올바른 순서로 표시해야합니다. 이것은 내 예입니다. <style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 150px; width:auto; …

78 html  css  flexbox 

flexbox를 사용하여 다른 DIV 내부에 DIV를 배치하고 있습니다. 필요할 때 화면 중앙에 나타나는 대화 상자를 생각해보십시오. 잘 작동하지만 대화 상자 위와 아래의 공간이 정확히 같지 않으면 나머지 공간의 40 %가 대화 상자보다 높고 60 % 아래에 있습니다. 대화 상자 높이는 내부 텍스트의 양에 따라 달라지기 때문에 까다로워집니다. 예를 들어 브라우저 …

23 html  css  flexbox  centering 

위아래 이미지와 텍스트로 메뉴 시스템을 만들려고합니다. 데이터는 동적입니다. 메뉴 시스템을 표시하여 각 이미지가 서로 다른 이미지와 동일한 거리를 유지하여 이미지가 가로 및 세로로 격자 모양으로 정렬되도록하고 싶습니다. 문제는 텍스트입니다. 텍스트가 이미지보다 길면 div가 확대됩니다. 그러나 이미지가 더 이상 서로 간격을 두지 않기 때문에 어색한 간격이 생깁니다. 이 문제를 해결하려면 가장 …

17 html  css  flexbox 

선택한 div를 확장하고 나머지 공간에 맞게 동일하게 확장하여 다른 div를 적절하게 작동시킬 수있는 스크립트 (여기서는 사용자의 도움으로)를 코딩했습니다 (너비가 고정 된 첫 번째 제외). 그리고 여기 내가 달성하고자하는 그림이 있습니다. 이를 위해 플렉스와 전환을 사용합니다. 잘 작동하지만 jQuery 스크립트는 "400 %"스트레치 값을 지정합니다 (테스트에 적합 함). 이제 선택한 div를 "400 …

9 javascript  jquery  css  flexbox  css-transitions 

다음과 같은 사양으로 다양한 크기의 이미지와 비율의 이미지 갤러리 표시 : 이미지 사이에 공백 (여백)이 없습니다. 원래 비율을 최대한 존중합니다. 링크로 둘러싸인 이미지. 비 JS 솔루션. 이미지가 약간 잘릴 수 있습니다. 휴대용 솔루션. 표시되는 이미지 세트는 무작위입니다. 이미지는 왼쪽에서 오른쪽으로 표시되어야합니다 (열 사용 금지). 나는 다음 flexbox 솔루션으로 그것을 달성했다. …

9 css  flexbox  image-gallery