垂直对齐 flexbox [英] Vertical align flexbox

问题描述

产品卡片应显示为

这是显示产品卡片的代码

//такой же код, что и код выше - только для черных пунктов меню типа Мони让类别标志='';$('.submenu__title a').on('click', function (event) {event.preventDefault();console.log('内部检查');categoryflag=event.target.innerHTML;subcategoryflag=categoryflag;控制台日志(类别标志)；$.ajax ({方法:'POST'，url: '../php/ajaxsubcategory1.php',缓存:假，数据:{categoryflag: categoryflag, subcategoryflag: subcategoryflag},数据类型:'json'，完成:功能(数据){控制台日志(数据.标题)；控制台日志(数据.计数记录)；},成功:功能(数据){console.log('检查');控制台日志(数据)；$('.rightmenu').html(data.result.msg);let centeroutput='<div id=\"topcenterarea\">'+'<h1>'+data.result.header+' '+data.result.countrecords+' товара' + data.output[0]['screendiagonal'] + '</h1>'+'</div>';productcardsoutput='';//productcard='<div class="ProductCardBlock">';for (让 i=0; i';productcard+='

';productcard+='

';productcard+='

';productcard+='

'+ data.output[i]['monoblockname'] +', ' + data.output[i]['color']+ '</div>';productcard+='<div class="ProductScreenParams">'+'<div class="text">'+ 'Диагональ/разрешение' + '</div>'+ data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.'+'

';productcard+='<div class="ProductCpuType">'+'<div class="text">'+ 'Тип процессора' + '</div>'+ data.output[i]['cputype'] +'

';productcard+='<div class="ProductCpuFrequency">'+'<div class="text">'+'Частота процессора'+'</div>'+ data.output[i]['频率'] +'

';productcard+='

'+ '

'+ 'Оперативная память (RAM)' + '</div>'+ data.output[i]['ramsize'] +'

';productcard+='

'+ '<div class="text">'+'Графический контроллер '+'</div>'+ data.output[i]['videocard'] +'</div>'如果(data.output[i]['memorytype']=='SSD'){productcard+='

'+ '

'+ 'Объем SSD' + '</div>'+ data.output[i]['sizememorydata'] +'

';}else if (data.output[i]['memorytype']=='HDD'){productcard+='

'+ '

'+ 'Объем HDD' + '</div>'+ data.output[i]['sizememorydata'] +'

';};productcard+='

';productcard+='<div class="dynamic ProductBuyPart">'+'<button type="submit" class="ProductAddToBasket" value="В корзину"></button>'+'

';//productcard+='<div class="ProductScreenParams">'+ 'Диагональ/разрешение ' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution']+ 'пикс'.+'

';//productcard+='</div>';//productcard+='</div>';//productcard+='</div>';//productcard+='</div>';productcard+='

';productcardsoutput+=productcard;}centeroutput+=productcardsoutput;/*$('.centerarea').html('<div id=\"topcenterarea\">'+'<h1>'+data.header+' '+data.countrecords+' товара'+'</h1>'+'

');*/$('.centerarea').html(centeroutput);//expandCollapsedFunction();}});});

.text {字体:12px Roboto、Helvetica、Arial、sans-serif；底边距:5px；}.ProductCardBlock {宽度:100%；显示:弹性；弹性方向:行；对齐内容:拉伸；高度:168px；/*位置:相对；*/}.ProductCardBlock .ProductImage {/*宽度:计算(191.5/931.75)*100%；*//*宽度:20%；*/高度:100%；/*位置:绝对；*/宽度:220px；}.ProductCardBlock .ProductImage #ImageWrapper .ProductPicture {左边距:15px；边距顶部:20px；右边距:5px；/*位置:绝对；*/}.ProductCardBlock .ProductDescription {/*宽度:70%；*/边距顶部:20px；字体:14px Roboto、Tachoma、Arial、sans-serif；/*位置:绝对；*//*弹性:6;*/}.ProductCardBlock .ProductDescription .ProductName {底边距:15px；字体:16px Roboto、Tachoma、Arial、sans-serif；/*位置:绝对；*/}.ProductCardBlock .ProductDescription .ProductScreenParams {字体:14px Roboto、Tachoma、Arial、sans-serif；填充底部:5px；底边距:0；显示:弹性；弹性方向:行；justify-content: flex-start;align-items: flex-end;/*位置:绝对；*/}.ProductCardBlock .ProductDescription .ProductCpuType {字体:14px Roboto、Tachoma、Arial、sans-serif；底边距:5px；显示:弹性；弹性方向:行；justify-content: flex-start;align-items: flex-end;/*位置:绝对；*/}.ProductCardBlock .ProductDescription .ProductCpuFrequency {字体:14px Roboto、Tachoma、Arial、sans-serif；底边距:5px；显示:弹性；弹性方向:行；justify-content: flex-start;align-items: flex-end;/*位置:绝对；*/}.ProductCardBlock .ProductDescription .ProductRAM {字体:14px Roboto、Tachoma、Arial、sans-serif；底边距:5px；显示:弹性；弹性方向:行；justify-content: flex-start;align-items: flex-end;/*位置:绝对；*/}.ProductCardBlock .ProductDescription .ProductVideoCard {字体:14px Roboto、Tachoma、Arial、sans-serif；底边距:5px；显示:弹性；弹性方向:行；justify-content: flex-start;align-items: flex-end;/*位置:绝对；*/}.ProductCardBlock .ProductDescription .ProductDisksAndDrives {字体:14px Roboto、Tachoma、Arial、sans-serif；底边距:5px；显示:弹性；弹性方向:行；justify-content: flex-start;align-items: flex-end;/*位置:绝对；*/}/*.ProductCardBlock */.ProductBuyPart {边距顶部:自动；边距底部:自动；填充顶部:自动；填充底部:自动；右边距:40px；/*margin-left: 40px;*//*右填充:40px;*//*宽度:10%；*//*位置:绝对；*//*显示:块；*//*弹性:4;*//*宽度:自动；*/}/*.ProductCardBlock .ProductBuyPart */.ProductAddToBasket {/*边距:自动；填充:自动；*/宽度:80px；高度:40px；/*位置:绝对；*/}

告诉我如何实现所需的对齐.这是用于轻松编辑的代码 https://jsfiddle.net/vladdvin/dzm7purk/2/.

解决方案

在父容器上使用 display:flex 并使用justify-content:space-evenly或任何其他您希望按照您想要的方式对齐孩子的样式从 code-pen

中查看此示例

Product cards should be displayed as at https://www.mvideo.ru/komputernaya-tehnika-4107/monobloki-181/f/category=monobloki-603?reff=menu_main. But displayed as in the picture below

Here is the code that displays the product cards

        // такой же код, что и код выше - только для черных пунктов меню типа Моноблоки 
        let categoryflag='';
            $('.submenu__title a').on('click', function (event) {
                event.preventDefault();
                console.log('Inner check');             
                categoryflag=event.target.innerHTML;
                subcategoryflag=categoryflag;
                console.log(categoryflag);
                $.ajax ({
                    method: 'POST',
                    url: '../php/ajaxsubcategory1.php',
                    cache: false,                   
                    data: {categoryflag: categoryflag, subcategoryflag: subcategoryflag},
                    dataType: 'json',
                    complete: function(data) {
                        console.log(data.header);
                        console.log(data.countrecords);
                    },
                    success: function (data) {
                        console.log('check');
                        console.log(data);
                        $('.rightmenu').html(data.result.msg);
                        let centeroutput='<div id=\"topcenterarea\">'+'<h1>'+data.result.header+' '+data.result.countrecords+' товара' + data.output[0]['screendiagonal'] + '</h1>'+'</div>';
                        
                        
                        productcardsoutput='';
                        // productcard='<div class="ProductCardBlock">';
                        
                        
                        for (let i=0; i<data.result.countrecords; i++)
                            {
                                productcard='<div class="ProductCardBlock">';
                                productcard+='<div class="dynamic ProductImage">';
                                productcard+='<div id="ImageWrapper">';
                                productcard+='<img class="ProductPicture" src='+'"../images/'+data.output[i]['imagepath']+'">';
                                productcard+='</div>';
                                productcard+='</div>';
                                productcard+='<div class="dynamic ProductDescription">';
                                productcard+='<div class="ProductName">' + data.output[i]['monoblockname'] +', ' + data.output[i]['color']+ '</div>';
                                productcard+='<div class="ProductScreenParams">'+ '<div class="text">' + 'Диагональ/разрешение  ' + '</div>' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.' +'</div>';
                                productcard+='<div class="ProductCpuType">'+ '<div class="text">' + 'Тип процессора  ' + '</div>' + data.output[i]['cputype'] +'</div>';
                                productcard+='<div class="ProductCpuFrequency">'+ '<div class="text">'+ 'Частота процессора  ' +'</div>'+ data.output[i]['frequency'] +'</div>';
                                productcard+='<div class="ProductRAM">' + '<div class="text">' + 'Оперативная память (RAM)  ' + '</div>' + data.output[i]['ramsize']  +'</div>';
                                productcard+='<div class="ProductVideoCard">' + '<div class="text">'+'Графический контроллер  '+'</div>' + data.output[i]['videocard']  +'</div>'
                                
                                if (data.output[i]['memorytype']=='SSD') {
                                    productcard+='<div class="ProductDisksAndDrives">' + '<div class="text">' + 'Объем SSD  ' + '</div>' + data.output[i]['sizememorydata']  +'</div>';
                                }
                                else if (data.output[i]['memorytype']=='HDD') {
                                    productcard+='<div class="ProductDisksAndDrives">' + '<div class="text">' + 'Объем HDD  ' + '</div>' + data.output[i]['sizememorydata']  +'</div>';
                                };
                                
                                productcard+='</div>';
                                productcard+='<div class="dynamic ProductBuyPart">'+ '<button type="submit" class="ProductAddToBasket" value="В корзину"></button>' +'</div>';
                                // productcard+='<div class="ProductScreenParams">'+ 'Диагональ/разрешение ' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.' +'</div>';
                                
                                
                                // productcard+='</div>';
                                // productcard+='</div>';
                                // productcard+='</div>';
                                // productcard+='</div>';
                                productcard+='</div>';
                                productcardsoutput+=productcard;
                            }
                        
                        centeroutput+=productcardsoutput;
                        
                        /*$('.centerarea').html('<div id=\"topcenterarea\">'+'<h1>'+data.header+' '+data.countrecords+' товара'+'</h1>'+'</div>');*/ 
                        $('.centerarea').html(centeroutput);

                        //expandCollapsedFunction();
                }
            }
            );
        }
        );

.text {
    font: 12px Roboto,Helvetica,Arial,sans-serif;
    margin-bottom: 5px; 
}

.ProductCardBlock {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    height: 168px;
    /*position: relative;*/
}

.ProductCardBlock .ProductImage {
    /*width: calc(191.5/931.75)*100%;*/
    /*width: 20%;*/
    height: 100%;
    /*position: absolute;*/
    width: 220px;
}

.ProductCardBlock .ProductImage #ImageWrapper .ProductPicture {
    margin-left: 15px;
    margin-top: 20px;
    margin-right: 5px;
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription {
    /*width: 70%;*/
    margin-top: 20px;
    font: 14px Roboto, Tachoma, Arial, sans-serif;
    /*position: absolute;*/
    /*flex: 6;*/
}

.ProductCardBlock .ProductDescription .ProductName {
    margin-bottom: 15px;
    font: 16px Roboto, Tachoma, Arial,sans-serif;
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductScreenParams {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    padding-bottom: 5px;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductCpuType {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductCpuFrequency {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductRAM {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductVideoCard {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductDisksAndDrives {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

/*.ProductCardBlock */.ProductBuyPart {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: auto;
    padding-bottom: auto;
    margin-right: 40px;
    /*margin-left: 40px;*/
    /*padding-right: 40px;*/
    /*width: 10%;*/
    /*position: absolute;*/
    /*display: block;*/
    /*flex: 4;*/
    /*width: auto;*/
}

/*.ProductCardBlock .ProductBuyPart */.ProductAddToBasket {
    /*margin: auto;
    padding: auto;*/
    width: 80px;
    height: 40px;
    /*position: absolute;*/
}

Tell me how to achieve the desired alignment. Here is the code for easy editing https://jsfiddle.net/vladdvin/dzm7purk/2/.

解决方案

use display:flex on the parent container and use justify-content:space-evenly or any other styling style you wish to align the children according to way you want check out this example from code-pen

这篇关于垂直对齐 flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！