AMcoder - javascript, python, java, html, php, sql

Flexbox-ի տարրերը շարված չեն լինի

Ես կառուցում եմ իմ պորտֆոլիոն՝ օգտագործելով Flexbox-ը: Սկզբում գրել էի մոբայլ դիտում ու լավ աշխատեց։ Երբ ես չափափոխում եմ պատուհանի չափը լրիվ չափի, ես ակնկալում եմ, որ տարրերը կշարվեն հորիզոնական (ես դրել եմ flex-flow:row wrap;), բայց դրանք մնում են սյունակում:

Ես փորձել եմ փոխել պատկերների չափը և կարգավորել լուսանցքը/լիցքավորումը/և այլն, բայց ամեն տողում մեկից ավելի նյութ չի ստացվի: Իդեալում յուրաքանչյուր տողում 3-4 տարր կպահվի:

.projects {
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
}

.item {
    border:1px solid white;
    padding:5%;
    margin:5% auto;
}

.item img {
    max-width:100%;
    height:auto;
}

.caption {
    font-size:0.75rem;
    border-top:1px solid white;
    width:80%;
    margin:0 auto;
}

Ամբողջական կոդը այստեղ՝ http://codepen.io/duggalsf/pen/bwjpLo

Ցանկացած խորհուրդ օգտակար կլինի: (Նաև տեղեկացրեք ինձ, եթե ես պարզապես պետք է մեդիա հարցումներ անեմ, ինձ տրվեց հասկանալ, որ Flexbox ցանցի օգտագործումը լրատվամիջոցների հարցումներ չի պահանջում) Շնորհակալություն:

css flexbox responsive-design
14.10.2016

Պատասխանները:


1 
.projects ul {
    display:flex;
    flex-flow:row wrap;
    justify-content:space-around;
}

դուք պետք է օգտագործեք .projects ul՝ .projects-ի փոխարեն: ահա գործող Ջութակը

14.10.2016

2

խնդրում եմ փոխել այս դասը.

.item {
   border:1px solid white;
   padding:5%;
   margin:5% auto;
   display:inline-block; /* add this class */
}
14.10.2016
Նոր նյութեր
Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..
Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...
Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..
Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..
Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..
C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...
Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..